#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);
结果展示: