溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
本文主要給大家介紹了關于vue組件之間傳遞數據的相關資料，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹：
作用域
在vue中，組件實例的作用域是孤立的，父組件模板的內容在父組件作用域內編譯；子組件模板的內容在子組件作用域內編譯。這意味著不能 (也不應該) 在子組件的模板內直接引用父組件的數據。
下面幾種方法可以實現組件之間數據的傳遞。
一、通過prop傳遞數據
1）在子組件中，使用prop屬性，顯示的表明，它所需要的數據。
2）在父組件中，需要引用子組件的地方，傳入數據。
具體看下面的代碼：
<div id="app">
<my-item :value="value">//傳入數據，注意引號里面的為父組件的數據，
</my-item>
</div>
Vue.component("my-item",{
template:"<div>這是組件,{{value}}</div>",
props:["value"],//聲明需要的數據，HTML 特性是不區分大小寫的,所以此處如果為駝峰命名法，如：myMessage，則在模板中需要轉化為用斷線隔開的形式：my-Message
data:function(){
return {
}
},
methods:{
}
});
//創建vue實例
const vm=new Vue({
el:"#app",
data:{
value:"這是父組件的數據",
},
methods:{
},
});
這種方法適合父組件向子組件傳遞數據，可以記為：你先告訴我要什么，然后我給你什么。
注意：這種方式是單向數據流，當父組件的屬性變化時，將傳導給子組件，但是不會反過來。當你想改變prop中數據時，可采用如下方法：定義一個局部變量，并用 prop 的值初始化它，或者使用計算屬性。
二、通過自定義事件
自定義事件可以實現子組件向父組件傳遞數據，具體方法如下：
1）在子組件中使用$emit(eventName,[...args])觸發事件，傳遞數據
2）在父組件中$on(eventName,callback)監聽事件，接受數據作為回調函數的參數，并執行回調函數。
其實這種方法和angular中控制器之間傳遞數據的有點類似的。注意觸發和監聽事件的事件類型必須要保持一致，才可接受導數據。具體看下面的例子：
<div id="app">
{{number}}
<!-- 在用到子組件的地方監聽，監聽當前實例上的自定義事件 ,接受參數，并執行回調-->
<my-item v-on:cli="totlcli">
</my-item>
</div>
Vue.component("my-item",{
template:"<button v-on:click='add'>{{count}}</button>",
data:function(){
return {
count : 0,
}
},
methods:{
add:function(){
this.count+=1;
this.$emit("cli",this.count);//觸發當前實例上的事件。多個參數可以數組的形式傳遞
}
}
});
//創建vue實例
const vm=new Vue({
el:"#app",
data:{
number:""
},
methods:{
totlcli:function(num){//這個回調在父組件監聽到事件時，執行的，其參數為觸發事件時傳遞的。
return this.number=num;
},
},
});
這樣就可以把子組件中的數據通過自定義事件的方式傳到了父組件。
三、使用slot分發內容
主要應用場景是，混合父組件的內容與子組件自己的模板時用到。具體使用步驟：
1）在子組件中，使用slot標簽作為組件模板之中的內容分發插槽。 <slot> 元素自身將被替換。
2）在父組件中，使用slot屬性，用于標記往哪個slot中插入子組件內容。
當name相同時，響應的內容就會被插入到子組件中去
具體看下面的例子：
<div id="app">
<my-item>
<p slot="header">這是頭部</p>
<p>這是多余的內容，</p>
<p slot="footer">這是尾部</p>
</my-item>
</div>
Vue.component("my-item",{
template:"<div>"+
"<header><slot name='header'></slot></header>"+
"<main><slot>備用插槽，當沒有備用內容會顯示出來</slot></main>"+
"<footer><slot name='footer'></slot></footer>"+
"<div>",
props:{
},
data:function(){
return {
}
}
});
const vm=new Vue({
el:"#app",
data:{
},
methods:{
},
});
渲染結構如下：
注意：匿名（沒用name屬性）的slot元素，作為找不到匹配的內容片段的備用插槽，即在父組件中沒有使用slot屬性的內容會在這個備用插槽顯示。如果沒有默認的 slot，這些找不到匹配的內容片段將被拋棄。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
