父组件→子组件
<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'