提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
父子组件之间的传值和方法调用经常用到,导航栏的全局搜索就可以通过这个实现。简单写个demo练习一下。
一、实现代码
father.vue代码:
<template>
<div class="father">
<button v-on:click="runSonMd">调用子组件方法</button>
<!--@faMethod="faMethod"暴露父组件方法;:faMsg="faMsg"暴露父组件的值;ref="sonMethod"绑定子组件-->
<router-view @faMethod="faMethod" :faMsg="faMsg" ref="sonMethod"></router-view>
</div>
</template>
<script>
export default {
name: "Father",
data(){
return {
faMsg: '我是父组件信息',
sonMsg: ''
}
},
methods:{
//父组件方法
faMethod(val){
//调用子组件值
this.sonMsg = val;
alert('我是父组件方法,子组件的信息是:'+this.sonMsg);
},
runSonMd(){
//调用子组件的方法
this.$refs.sonMethod.sonMethod();
}
}
}
</script>
son.vue代码:
<template>
<div id="son">
<button v-on:click="runFaMd">调用父组件方法</button>
</div>
</template>
<script>
export default {
name: "Son",
//父组件参数列表
props: ['faMsg'],
//监听父组件值
watch: {
faMsg: function (val) {
// 接收父组件的值
this.faMsgs = val;
}
},
data() {
return{
sonMsg: '我是子组件信息',
faMsgs: ''
}
},methods:{
//子组件方法
sonMethod(){
alert('我是子组件方法,父组件信息是:'+this.faMsg);
},
runFaMd(){
//调用父组件方法
this.$emit('faMethod',this.sonMsg);
}
}
}
</script>
总结
父子组件传值和调用方法,融合到一块写了,第一次看比较绕,多看几次就能理解了,代码里面也做了详细的注释。需要注意的点有:
1、代码的逻辑:父组件调用子组件的方法,输出子组件接收父组件的值;子组件调用父组件的方法,输出父组件接受子组件的值。
2、子组件向父组件传值,其实是,子组件调用父组件的方法给父组件接受参数的变量赋值的操作。
3、我觉得这种子组件调用父组件的方式最简洁,另外还有其它两种方式。