父子組件之間可以通過props進(jìn)行通信:
組件的定義:
1.創(chuàng)建component類:
var Profile = Vue.extend({ template: "<div>Lily</div>"; }) 2.注冊一個tagnme:
Vue.component("me-profile",Profile);//全局注冊局部注冊:
var vm = new Vue({ el: "#todo", components: { "my-profile": Profile }, ...} 模板注意事項(xiàng):
因?yàn)?Vue 就是原生的DOM,所以有些自定義標(biāo)簽可能不符合DOM標(biāo)準(zhǔn),比如想在 table 中自定義一個 tr,如果直接插入 my-component 不符合規(guī)范,所以應(yīng)該這樣寫:
<table> <tr is="my-component"></tr></table>
在子組件中有一個this.$parent和this.$root可以用來方法父組件和跟實(shí)例。(但是不推薦)
Vue中子組件可以通過事件和父組件進(jìn)行通信。向父組件發(fā)消息是通過this.$dispatch,而向子組件發(fā)送消息是通過this.$boardcast,這里都是向所有的父組件和子組件發(fā)送消息。
子組件:
props: { url: { type: Array, default: function() { return [] } } }, methods: { add: function() { this.$dispatch("add", this.input); //這里就是向父組件發(fā)送消息 this.input = ""; } } 父組件:
data() { return { url: ..... } }, events: { add: function(input) { if(!input) return false; this.list.unshift({ title: input, done: false }); } } 以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答