vue中各組件之間傳遞數(shù)據(jù)的方法示例

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:34:06

vue中各組件之間傳遞數(shù)據(jù)的方法示例

vue中各組件之間傳遞數(shù)據(jù)的方法示例:前言本文主要給大家介紹了關(guān)于vue組件之間傳遞數(shù)據(jù)的相關(guān)資料，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹：作用域在vue中，組件實例的作用域是孤立的，父組件模板的內(nèi)容在父組件作用域內(nèi)編譯；子組件模板的內(nèi)容在子組件作用域內(nèi)編譯

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀vue中各組件之間傳遞數(shù)據(jù)的方法示例:前言本文主要給大家介紹了關(guān)于vue組件之間傳遞數(shù)據(jù)的相關(guān)資料，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹：作用域在vue中，組件實例的作用域是孤立的，父組件模板的內(nèi)容在父組件作用域內(nèi)編譯；子組件模板的內(nèi)容在子組件作用域內(nèi)編譯

前言

本文主要給大家介紹了關(guān)于vue組件之間傳遞數(shù)據(jù)的相關(guān)資料，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹：

作用域

在vue中，組件實例的作用域是孤立的，父組件模板的內(nèi)容在父組件作用域內(nèi)編譯；子組件模板的內(nèi)容在子組件作用域內(nèi)編譯。這意味著不能 (也不應(yīng)該) 在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。

下面幾種方法可以實現(xiàn)組件之間數(shù)據(jù)的傳遞。

一、通過prop傳遞數(shù)據(jù)

1）在子組件中，使用prop屬性，顯示的表明，它所需要的數(shù)據(jù)。

2）在父組件中，需要引用子組件的地方，傳入數(shù)據(jù)。

具體看下面的代碼：

<div id="app">
<my-item :value="value">//傳入數(shù)據(jù)，注意引號里面的為父組件的數(shù)據(jù)，
</my-item>
</div> 
Vue.component("my-item",{
 template:"<div>這是組件,{{value}}</div>",
 props:["value"],//聲明需要的數(shù)據(jù)，HTML 特性是不區(qū)分大小寫的,所以此處如果為駝峰命名法，如：myMessage，則在模板中需要轉(zhuǎn)化為用斷線隔開的形式：my-Message
 data:function(){
 return {

 }
 },
 methods:{
 
 }
});

//創(chuàng)建vue實例
const vm=new Vue({
 el:"#app",
 data:{
 value:"這是父組件的數(shù)據(jù)",
 },
 methods:{
 
 },
});

這種方法適合父組件向子組件傳遞數(shù)據(jù)，可以記為：你先告訴我要什么，然后我給你什么。

注意：這種方式是單向數(shù)據(jù)流，當(dāng)父組件的屬性變化時，將傳導(dǎo)給子組件，但是不會反過來。當(dāng)你想改變prop中數(shù)據(jù)時，可采用如下方法：定義一個局部變量，并用 prop 的值初始化它，或者使用計算屬性。

二、通過自定義事件

自定義事件可以實現(xiàn)子組件向父組件傳遞數(shù)據(jù)，具體方法如下：

1）在子組件中使用$emit(eventName,[...args])觸發(fā)事件，傳遞數(shù)據(jù)

2）在父組件中$on(eventName,callback)監(jiān)聽事件，接受數(shù)據(jù)作為回調(diào)函數(shù)的參數(shù)，并執(zhí)行回調(diào)函數(shù)。

其實這種方法和angular中控制器之間傳遞數(shù)據(jù)的有點類似的。注意觸發(fā)和監(jiān)聽事件的事件類型必須要保持一致，才可接受導(dǎo)數(shù)據(jù)。具體看下面的例子：

<div id="app">
{{number}}
<!-- 在用到子組件的地方監(jiān)聽，監(jiān)聽當(dāng)前實例上的自定義事件 ,接受參數(shù)，并執(zhí)行回調(diào)-->
<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);//觸發(fā)當(dāng)前實例上的事件。多個參數(shù)可以數(shù)組的形式傳遞
 }
}
});

//創(chuàng)建vue實例
const vm=new Vue({
el:"#app",
data:{
 number:""
},
methods:{
 totlcli:function(num){//這個回調(diào)在父組件監(jiān)聽到事件時，執(zhí)行的，其參數(shù)為觸發(fā)事件時傳遞的。
 return this.number=num;
 },
},
});

這樣就可以把子組件中的數(shù)據(jù)通過自定義事件的方式傳到了父組件。

三、使用slot分發(fā)內(nèi)容

主要應(yīng)用場景是，混合父組件的內(nèi)容與子組件自己的模板時用到。具體使用步驟：

1）在子組件中，使用slot標(biāo)簽作為組件模板之中的內(nèi)容分發(fā)插槽。 <slot> 元素自身將被替換。

2）在父組件中，使用slot屬性，用于標(biāo)記往哪個slot中插入子組件內(nèi)容。

當(dāng)name相同時，響應(yīng)的內(nèi)容就會被插入到子組件中去
具體看下面的例子：

<div id="app">
 <my-item>
 <p slot="header">這是頭部</p>
 <p>這是多余的內(nèi)容，</p>
 <p slot="footer">這是尾部</p>
 </my-item>
</div>

Vue.component("my-item",{
 template:"<div>"+
 "<header><slot name='header'></slot></header>"+
 "<main><slot>備用插槽，當(dāng)沒有備用內(nèi)容會顯示出來</slot></main>"+
 "<footer><slot name='footer'></slot></footer>"+
 "<div>",
 props:{
 },
 data:function(){
 return { 
 }
 }
 });
 const vm=new Vue({
 el:"#app",
 data:{
 },
 methods:{ 
 },
 });

渲染結(jié)構(gòu)如下：