一、父组件调用子组件的方法
步骤拆解:
(1)父组件:1.渲染调用子组件 2.导入子组件 3.声明子组件变量 4.调用子组件
(2)子组件:1.实现子组件自己的渲染、数据处理功能 2.使用父组件的变量
(1)父组件:
1.调用渲染子组件
<child>
v-bind:user="user" //父任务的变量user,子任务使用
ref="child"
:child="child"
</child>
2.导入子组件,声明子组件变量
import child from "../../views/child"; //子组件路径
export default {
data(){
return{
child:""
},
components:{
child
}
}
}
3.调用子组件
方法、变量:
this.$refs.child.showChildDialog(); //子组件的方法
this.$refs.child.childParam; //子组件的变量
(2)子组件:
1.声明父组件的变量
export default:{
props:{
user:{ //父组件的变量
type:Object, //父组件中他是一个对象,如为list则这里填Array
required:false
}
}
}
2.使用父组件的变量
this.parentId = this.user.id;
注意事项:
父子组件传值,数据是异步请求,有可能数据渲染时报错;
如方法或变量的调用放到了create()中可能存在数据未拿到就已经渲染的问题;
还在学习补充中,有错误的地方欢迎指出