传值(父子、子父)


父组件→子组件
<div class="father">
    <child :inputName="name">
</div>

<div class="child">
    {{inputName}}
</div>
通过props接受数据
(1)props: {
   inputName: String,
   required: true
  }
(2)props: ["inputName"]



子组件→父组件
子组件使用 $emit('方法名','其他参数')传递

子组件:
<input type="button" value="点击触发" @click="childClick">
data:{
    childdata:'hello'
}
methods:{
    childClick(){
        this.$emit('goFather',childdata)
    }
}

父组件:
<child @goFather="fatherFunction"></child>
methhods:{
    fatherFunction(content){
        console.log(content) //content是传递上来的数据
    }
}


父组件调用子组件的方法
父组件:
<div @click="parentMethod">
    <children ref="child"></children>
</div>

this.$refs.child.childMethods(); //childMethods()是子组件中的方法


父子组件之间修改数据

this.$children.msg='123'
this.$parent.msg='456'

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM