Vue中子组件调用父组件属性以及方法
子组件调用父组件的属性既然子组件要调用父组件的属性,父组件就首先要有这个属性,首先在data里先定义那么一个属性值:data(){return{addDialogVisible: false,}}好,有了可以被子组件调用的值了以后呢,东西准备好了,那就得让子组件和父组件之间建立一个联系,在父组件中引入子组件:import saveProject from "./saveProject.vue";e
子组件调用父组件的属性
既然子组件要调用父组件的属性,父组件就首先要有这个属性,首先在data里先定义那么一个属性值:
data(){
return{
addDialogVisible: false,
}
}
好,有了可以被子组件调用的值了以后呢,东西准备好了,那就得让子组件和父组件之间建立一个联系,在父组件中引入子组件:
import saveProject from "./saveProject.vue";
export default {
//并将我们引用这个组件暴露出来
components: {
"save-project":saveProject,
},
}
既然引用注册完了,那就得给子组件在父组件中寻找一个容身之处,也可以说是一个接头点。
同时呢,还要给这个子组件说一下我想要给子组件用的属性,上面我们已经准备好东西了,还给这个子组件找了接头点,这里就要去他这个接头点给他他想要的东西了,这里可以看作是一个桥梁,我们通过这个桥梁把父组件和子组件连起来了
<save-project v-bind:addDialogVisible = "addDialogVisible"></save-project>
子组件东西拿到了,他就得拿着这个东西回自己家 即子组件的vue文件中,然后他得找个东西放父组件给的东西,所以要再定义一个props来放:
export default {
//接收父组件传来的addDialogVisible
props:['addDialogVisible'],
}
东西也接受了,那子组件就可以随意引用这个属性啦
比如:
<div>
{{addDialogVisible}}
</div>
那么如果子组件不满足于现状,得寸进尺还想改变父组件的这个属性值呢?
子组件修改父组件属性值
这里我们得先搞一个触发这个改变的时间,随便定义一个按钮,绑定一个事件
<button @click="closeDialog()">pick me!<button>
同时定义这个时间,这里重点就来啦,我们在定义这个事件内部要用到this.$emit(’ A ', B )这个语法,A是父组件中同名的方法,B是携带的参数。他就好象是一个信使,子组件通过这个信使让他去父组件组件找到名为A的人把B交给他。
closeDialog(){
this.$emit('success',false);
}
既然已经告诉这个信使要找一个名为success的人了,那我们得在父组件中有这么个人,让信使得找到他,所以就要在父组件中创建它,还记得之前传属性那个桥梁吗,我们就把这个人放那试试
<save-project v-bind:addDialogVisible = "addDialogVisible" v-on:success="success(res)"></save-project>
到这里还没结束,emit要找的人呢架子比较大,他也学子组件派了个信使,这个信使就是我们刚刚创建的v-on:success=“success(res)”
这个信使呢拿到了子组件派来的信使的东西,他就赶紧跑下去找这个方法老大,
所以我们还要在methods中定义这个方法,得让这个父组件中的信使有个老大
methods: {
//接受子组件的事件调用
success(res){
this.addDialogVisible=res;
},
}
ok,到这里就大功告成了,父组件终于收到了子组件的通知,然后他就会调用这个success方法,并把接受的参数res赋值给自己组件中的addDialogVisible属性~
更多推荐
所有评论(0)