您的位置：首页 > 产品设计 > UI/UE

Vue.js组件的通信之父组件向子父组件的通信

2017-03-09 19:41 691 查看

<!DOCTYPE html>
　　<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>componentParentChildCommunication</title>
　　　　<script src="js/vue.js"></script>
　　</head>

　　<template id="parentComp">
　　　　<div>
　　　　　　I am parent component:{{msg}},The Data from child:{{msg2}}
　　　　　　<hr>
　　　　　　
　　　　　　<child @child="parentFn"></child>
　　　　</div>
　　</template>

　　<template id="childComp">
　　　　<div>I am child component:{{msg}}</div>
　　</template>
　　<body>

　　<script>
　　　　let child={
　　　　　　template:'#childComp',
　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　　msg:'child Data'
　　　　　　　　}
　　　　　　},
　　　　　　mounted(){
　　　　　　/*this.$emit('自定义事件名',数据);*/
　　　　　　　　this.$emit('child',this.msg);
　　　　　　}
　　　　};

　　　　let parent={
　　　　　　template:'#parentComp',
　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　　msg:'parent Data',
　　　　　　　　　　msg2:''
　　　　　　　　}
　　　　　　},
　　　　　　components:{
　　　　　　　　child
　　　　　　},
　　　　　　methods:{
　　　　　　　　parentFn(data){
　　　　　　　　　　this.msg2=data;
　　　　　　　　}
　　　　　　}
　　　　};

　　　　window.onload=function(){
　　　　　　new Vue({
　　　　　　　　el:'#app',
　　　　　　　　components:{
　　　　　　　　　　parent
　　　　　　　　}
　　　　　　});
　　　　}
　　　　/*父元素向子元素通信关键总结：
　　　　　　1：在嵌套的子元素(使用时)上：<child @自定义事件名="父方法"></child>;
　　　　　　2：子元素在加载完成的钩子函数（mounted）上加一个方法:this.$emit('自定义事件名',数据);
　　　　　　3：父元素上的方法:父方法名(data){...}
　　　　*/
　　</script>

　　<div id="app">
　　　　<parent></parent>
　　</div>
　　</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航