Vue.js-----轻量高效的MVVM框架（十、父子组件通信）

#1、父链

html：

<h3>#父链</h3>
<div>
<div>子组件可以用 this.$parent 访问它的父组件。根实例的后代可以用 this.$root 访问它。父组件有一个数组 this.$children，包含它所有的子元素。</div>
<div>
尽管可以访问父链上任意的实例，不过子组件应当避免直接依赖父组件的数据，尽量显式地使用 props 传递数据。另外，在子组件中修改父组件的状态是非常糟糕的做法，因为：
<ul>
<li>这让父组件与子组件紧密地耦合；</li>
<li>只看父组件，很难理解父组件的状态。因为它可能被任意子组件修改！理想情况下，只有组件自己能修改它的状态。
</li>
</ul>
</div>
<div id="dr01">
<child01></child01>
</div>
</div>

js: dr01作为父代组件，child01作为子代组件，grandson01作为孙代组件

//***************************************************************
//父链
//自定义子代组件child01
Vue.component("child01", {
data: function() {
return {
cMsg: "this is child msg!",
cParentMsg: this.$parent.dr01Msg, //child01的上级信息就是dr01的dr01Msg
cRootMsg: this.$root.rootMsg, //child01的根信息就是dr01的rootMsg
}
},
template: "<div>cMsg: {{cMsg}}, cParentMsg: {{cParentMsg}}, cRootMsg: {{cRootMsg}}</div>"
+"<grandson01 :s-parent-msg='cMsg'></grandson01>"
});
//自定义孙代组件grandson01，
Vue.component("grandson01", {
data: function() {
return {
sMsg: "this is grandsonMsg1",
sRootMsg: this.$root.rootMsg, //grandson01根信息就是dr01的rootMsg
}
},
//grandson01上级信息就是child01的cMsg,
　  //在这里使用props属性，将子代cMsg赋给孙代的“sParentMsg”，示例：在子代模板中：<grandson01 :s-parent-msg='cMsg'></grandson01>
props:["sParentMsg"],
template: "<div>sMsg: {{sMsg}}, sParentMsg: {{sParentMsg}}, sRootMsg: {{sRootMsg}}</div>"
})
var dr01 = new Vue({
el: "#dr01",
data: {
dr01Msg: "this is dr01Msg!",
rootMsg: "this is rootMsg!",
},
});

结果：

#2、自定义事件

html:

<h3>#自定义事件</h3>
<template id="dr02-temp">
<input v-model="msg" placeholder="please input your message!" />
<button @click="notifyAdd(msg)">Dispatche Event</button>
</template>
<div id="dr02">
<div>
<span>每个 Vue 实例都是一个事件触发器：</span>
<ol>
<li>使用 $on() 监听事件；</li>
<li>使用 $emit() 在它上面触发事件；</li>
<li>使用 $dispatch() 派发事件，事件沿着父链冒泡；</li>
<li>使用 $broadcast() 广播事件，事件向下传导给所有的后代。</li>
</ol>
</div>
<p>Messages: {{messages|json}}</p>
<child02></child02>
</div>

js:

//***************************************************************
//自定义事件
Vue.component("child02", {
//定义模板中初始化的值
data: function() {
return {
msg: "hello",
}
},
//指定模板为id为"dr02-temp"标签
template: "#dr02-temp",
methods: {
//当点击按钮时会触发的事件
notifyAdd: function(msg) {
console.log("invoke notifyAdd()");
if (msg.trim()) {
//将事件分发到vm实例中的"addMsg"事件中
this.$dispatch("addMsg", msg);
this.msg = "";
}
}
}
});
var dr02 = new Vue({
el: "#dr02",
//初始化messages数组
data: {
messages: [],
},
events: {
//分发事件到vm实例中， 在创建实例时 `events` 选项简单地调用 `$on`
addMsg: function(msg) {
console.log("invoke events's addMsg()");
this.messages.push(msg);
}
},
});

结果：

　　

#3、使用v-on绑定自定义事件

html:

<h3>使用v-on绑定自定义事件</h3>
<template id="dr03-temp">
<input v-model="msg" placeholder="input msg..." />
<button @click="dispatchMsg(msg)">处理msg</button>
</template>
<div id="dr03">
<p>Messages: {{messages|json}}</p>
<child03 v-on:dispatchMsg="addMsg"></child03>
</div>

js:

　　 //***************************************************************
//使用v-on绑定自定义事件（在这里测试的时候发现，在dispatchMsg方法中依然要写this.$dispatch，不然只能监听到dispatchMsg方法，并不能向上冒泡）
//这里哪儿不对，问题出现在哪里？？？？
//这里选择使用局部注册组件的方式测试。
var child03 = Vue.extend({
data: function() {
return {
msg: 'hello, child03!',
}
},
template: "#dr03-temp",
methods: {
dispatchMsg: function() {
console.log("invoke dispatchMsg()");
if (this.msg.trim()) {
　　　　　　　　　　　 //尽管使用了v-on绑定了自定义事件dispatchMsg到vm实例中的addMsg方法中，但是依然不会向上冒泡，这里事实上是有问题的。
this.$dispatch("addMsg", this.msg);
this.msg = '';
}
}
}
});
var dr03 = new Vue({
el: "#dr03",
data: {
messages: [],
},
events: {
addMsg: function(msg) {
console.log("invoke addMsg() msg: " + msg);
this.messages.push(msg);
}
},
components: {
"child03": child03,
}
});

结果与上面类似，只是多了控制台的输出

　　

#子组件索引

html:

<h3>子组件索引</h3>
<div id="dr04">
<div>
尽管有 props 和 events，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 v-ref 为子组件指定一个索引 ID。
</div>
<child03 v-ref:c03></child03>
<child04 v-ref:c04></child04>
</div>

js:

//***************************************************************
//字组件索引
Vue.component("child03", {
template: "<div>this is child03</div>"
});
Vue.component("child04", {
template: "<div>this is child04</div>"
});
var dr04 = new Vue({
el: "#dr04"
});
var child03 = dr04.$refs.c03;
var child04 = dr04.$refs.c04;
console.log("child03.$el: ");
console.log(child03.$el);
console.log("child04.$el: ");
console.log(child04.$el);

结果展示：