Vue子组件向父组件通信与父组件调用子组件中的方法
子组件向父组件通信
子组件的button按钮绑定点击事件,事件方法名为sendToParent(),
该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg);
在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e),
而msg已经在data中声明,其值为”子级消息”,故最终的输出结果为: 展示父级接收到的消息:子级消息
父组件调用子组件中的方法
点击父组件的button按钮,触发了click事件指向的useChild方法[该方法的行为是输出”父级消息”],
useChild方法在父组件的中的methods中声明,调用子组件中的方法,并传入参数str,即this.$refs.child1.getMsg(str);
而getMsg方法已经在子组件的methods中声明,其行为是console.log('子级组件收到父级的内容',str);,
所以,最终的输出结果为: 子级组件收到父级的内容 父级消息
代码示例(结合上面的分析理解代码)
子向父通信
#app {
border: 1px solid blue;
width: 500px;
padding: 20px;
margin: auto;
border-radius: 8px;
background: fuchsia;
}
#wrapper {
border: 1px solid red;
width: 400px;
padding: 20px;
border-radius: 8px;
background: yellowgreen;
margin-top: 20px;
}
这是父组件
展示父级接收到的消息:{{msg}}
调用子组件的方法
这是子组件
向父组件发消息
let child = {
template: '#child',
data() {
return {
msg: '子级消息'
};
},
methods: {
sendToParent() {
// 子组件只管发送消息，其中cus-event为自定义事件名(事件名不能写成驼峰法,多个单词用-连接)，this.msg为要传递的参数。
this.$emit('cus-event', this.msg);
},
getMsg(str) {
console.log('子级组件收到父级的内容', str);
}
}
};
// 注意: .$mount('#app')跟实例内部el: '#app'是等价的
new Vue({
data: {
msg: '',
szStr:'父级消息'
},
components: {
child
},
methods: {
doAction(e) {
console.log(this);
console.log(e);
this.msg = e;
},
useChild(str) {
// 调用子组件的方法
// console.log(this);
// console.log(this.$refs);
// this.$refs.child1得到的子组件实例
this.$refs.child1.getMsg(str);
}
}
}).$mount('#app');
效果图
总结
以上所述是小编给大家介绍的Vue子组件向父组件通信与父组件调用子组件中的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持！
以上就是本次给大家分享的关于java的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。

子组件调父组件的方法

在子组件中通过 this.$parent.event
通过 $emit 触发一个事件，父组件监听这个事件
通过 prop 传入父组件的方法

父组件 Home.vue
        <template>
            <div class="bor">
                <h3>{{title}}</h3>
                <HelloWorld @fatherMethod="changeTitle"  :changeFatherTitleMethod="changeTitle" ></HelloWorld>
            </div>
        </template>
        
        <script>
            import HelloWorld from '@/components/HelloWorld';
        
            export default {
                data () {
                    return {
                        title: '父组件 home'
                    }
                },
                components: {
                    HelloWorld
                },
                methods: {
                    changeTitle(text) {
                        this.title = text;
                    }
                }
            }
        </script>
        
        <style  scoped>
            .bor {
                padding: 5px;
                margin: 5px;
                border: solid 1px #000;
            }
         
        </style>


子组件 HelloWorld.vue
        <template>
            <div class="bor">
                <h3>子组件  hello world！</h3>
                <button @click="changeParentTitle1">通过 this.$parent.event 调用父组件的方法</button>
                <button @click="changeParentTitle2">通过 $emit 触发一个事件，父组件监听这个事件</button>
                <button @click="changeParentTitle3">通过 prop 传入父组件的方法</button>
            </div>
        </template>
        
        <script>
            export default {
              props: {
                changeFatherTitleMethod: {
                  type: Function
                }
              },
              data () {
                  return {
        
                  }
              },
              methods: {
                changeParentTitle1() {
                  this.$parent.changeTitle('通过 this.$parent.event 调用父组件的方法');
                },
                changeParentTitle2() {
                  this.$emit('fatherMethod', '通过 $emit 触发一个事件，父组件监听这个事件');
                },
                changeParentTitle3() {
                  this.changeFatherTitleMethod('通过 prop 传入父组件的方法');
                }
              }
            }
        </script>
        
        <style  scoped>
          .bor {
            padding: 10px;
            margin: 5px;
            border: solid 1px #000;
          }
        
          button {
            width: 100%;
            margin: 5px 0;
            padding: 10px;
          }
         
        </style>


父组件调用子组件的方法


通过 $refs 调用子组件的方法


通过 $emit 触发事件， 子组件监听该事件
父组件 Home.vue

    <template>
        <div class="bor">
            <h3>{{title}}</h3>
            <HelloWorld  ref="hello"></HelloWorld>
    
            <button @click="changeChildTitle1">通过 $refs 调用子组件的方法</button>
            <button @click="changeChildTitle2">通过 $emit 触发事件， 子组件监听该事件 </button>
        </div>
    </template>
    
    <script>
        import HelloWorld from '@/components/HelloWorld';
    
        export default {
            data () {
                return {
                    title: '父组件 home'
                }
            },
            components: {
                HelloWorld
            },
            methods: {
                changeChildTitle1() {
                    this.$refs.hello.changeTitle('父组件 通过 $ref 调用子组件的方法');
                },
                changeChildTitle2() {
                    this.$refs.hello.$emit('changeTitle');
                }
            }
        }
    </script>
    
    <style  scoped>
        .bor {
            padding: 5px;
            margin: 5px;
            border: solid 1px #000;
        }
    
        button {
            width: 100%;
            margin: 5px 0;
            padding: 10px;
        }
     
    </style>


子组件
	<template>
        <div class="bor">
            <h3>{{title}}</h3>
        </div>
    </template>
    
    <script>
        export default {
          data () {
              return {
                title: '子组件  hello world！'
              }
          },
          methods: {
            changeTitle(text) {
              this.title = text;
            }
          },
          mounted() {
            this.$on('changeTitle', ()=> {
              this.changeTitle('父组件通过 $emit 触发事件， 子组件监听该事件 ');
            });
          }
        }
    </script>
    
    <style  scoped>
      .bor {
        padding: 10px;
        margin: 5px;
        border: solid 1px #000;
      }
    
      button {
        width: 100%;
        margin: 5px 0;
        padding: 10px;
      }
     
    </style>

子组件向父组件通信
子组件的button按钮绑定点击事件,事件方法名为sendToParent(),
该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg);
在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e),
而msg已经在data中声明,其值为”子级消息”,故最终的输出结果为: 展示父级接收到的消息:子级消息
父组件调用子组件中的方法
点击父组件的button按钮,触发了click事件指向的useChild方法[该方法的行为是输出”父级消息”],
useChild方法在父组件的中的methods中声明,调用子组件中的方法,并传入参数str,即this.$refs.child1.getMsg(str);
而getMsg方法已经在子组件的methods中声明,其行为是console.log('子级组件收到父级的内容',str);,
所以,最终的输出结果为: 子级组件收到父级的内容 父级消息
代码示例(结合上面的分析理解代码)
子向父通信
效果图
总结
以上所述是小编给大家介绍的Vue子组件向父组件通信与父组件调用子组件中的方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 子组件和父组件传递数据与方法</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>

</style>
</head>
<body>
<div id="app">
	<parent></parent>
 </div>
 
<script>
Vue.component('parent',{
	template:'<div><child :Name="name" :Age="age" @Add="add"></child></div>',
	data(){
		return {
			name:'jcy',
			age:30
		}
		
	},
	methods:{
		add(age){   //add方法接受子组件传递的数据
			this.age = age
		}
	}
})
	
Vue.component('child',{
	template:'<div><p>我叫：{{ Name }},我今年{{ Age }}</p><button @click="add">加一岁</button></div>',
	props:{   //接受父组件传递的数据
		Name:{
			type:String,
			default:'ok',
		},
		Age:{
			type:Number,
			default:18
		},
	},
	
	methods:{
		add() {
			this.$emit('Add',this.Age += 1)//接受父组件传递的方法，并且带参数向父组件传送数据
		}
	}
})






var vm = new Vue({
  el: '#app',
  data(){
	  return {}
  }
})
</script>
</body>
</html>