Vue.js教程（十）-組件間的數(shù)據(jù)傳遞

Vue.js教程（十）--組件間的數(shù)據(jù)傳遞

Vue.js教程〔十〕--組件間的數(shù)據(jù)傳遞

1.父子組件

在一個(gè)組件內(nèi)部定義另一個(gè)組件，稱為父子組件。子組件只能在父組件中使用。

默認(rèn)情況下，子組件無法訪問父組件中的數(shù)據(jù)，每個(gè)組件實(shí)例的作用域是獨(dú)立的

2.組件間數(shù)據(jù)傳遞〔通信〕

(1)子組件訪問父組件中的數(shù)據(jù)

a〕在調(diào)用子組件時(shí)，綁定想要獲取的父組件的數(shù)據(jù)

b〕在子組件內(nèi)部，使用props選項(xiàng)聲明獲取的數(shù)據(jù)，即接收來自父組件的數(shù)據(jù)。注：組件中的數(shù)據(jù)共有三種形式，data、props、computed

例如：

必須有且只有一個(gè)根元素-->

我是hello父組件

訪問自己的數(shù)據(jù)：{{msg}}、{{name}}、{{age}}、{{user.id}}

我是world子組件

訪問父組件中的數(shù)據(jù)：{{message}},{{age}}、{{user.username}}

mui.init()

varvm=newVue({//根組件

el:"#content",

components:{

'my_hello':{//父組件

template:"#hello",

data(){

return{

msg:'hello',

name:'jack',

age:23,

user:{

id:2022311951,

username:'yxc'

}

}

},

components:{

'my_world':{//子組件

template:'#world',

props:['message','age','user']//接收父組件傳過來的數(shù)據(jù)

}

}

}

}

})

props

props可以是數(shù)組或?qū)ο?，用于接收來自父組件的數(shù)據(jù)。props可以是簡單的數(shù)組，或者使用對象作為替代，對象允許配置高級選項(xiàng)，如類型檢測、自定義驗(yàn)證和設(shè)置默認(rèn)值。

你可以基于對象的語法使用下列選項(xiàng)：

type:可以是以下原生構(gòu)造函數(shù)中的一種：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定義構(gòu)造函數(shù)、或上述內(nèi)容組成的數(shù)組。會檢查一個(gè)prop是否是給定的類型，否那么拋出警告。Prop類型的更多信息在此。

default:any為該prop指定一個(gè)默認(rèn)值。如果該prop沒有被傳入，那么換做用這個(gè)值。對象或數(shù)組的默認(rèn)值必須從一個(gè)工廠函數(shù)返回。

required:Boolean定義該prop是否是必填項(xiàng)。在非生產(chǎn)環(huán)境中，如果這個(gè)值為truthy且該+prop沒有被傳入的，那么一個(gè)控制臺警告將會被拋出。

validator:Function自定義驗(yàn)證函數(shù)會將該prop的值作為唯一的參數(shù)代入。在非生產(chǎn)環(huán)境下，如果該函數(shù)返回一個(gè)falsy的值(也就是驗(yàn)證失敗)，一個(gè)控制臺警告將會被拋出。你可以在這里查閱更多prop驗(yàn)證的相關(guān)信息。例如：

//簡單語法

Vueponent('props-demo-simple',{

props:['size','myMessage']

})

//對象語法，提供驗(yàn)證

Vueponent('props-demo-advanced',{

props:{

//檢測類型

height:Number,

//檢測類型+其他驗(yàn)證

age:{

type:Number,

default:0,

required:true,

validator:function(value){

returnvalue>=0

}

}

}

})

例如：

必須有且只有一個(gè)根元素-->

我是hello父組件

訪問自己的數(shù)據(jù)：{{msg}}、{{name}}、{{age}}、{{user.id}}

我是world子組件

訪問父組件中的數(shù)據(jù)：{{message}},{{age}},{{name}},{{user.username}}

mui.init()

varvm=newVue({//根組件

el:"#content",

components:{

'my_hello':{//父組件

template:"#hello",

data(){

return{

msg:'hello',

name:'jack',

age:23,

user:{

id:2022311951,

username:'yxc'

}

}

},

components:{

'my_world':{//子組件

template:'#world',

//props:['message','age','user']//接收父組件傳過來的數(shù)據(jù)

props:{//也可以是對象,允許配置高級設(shè)置,如類型判斷,數(shù)據(jù)校驗(yàn),設(shè)置默認(rèn)值

message:String,

age:{

type:Number,

default:18,

validator:function(value){

returnvalue>=0;

}

},

name:{

type:String,

required:true,

},

user:{

type:Object,

default:function(){//對象或數(shù)組的默認(rèn)值必須使用函數(shù)的屬性來返回

return{id:2022311950,username:'jack'};

}

}

}

}

}

}

}

})

總結(jié)：父組件通過props向下傳遞數(shù)據(jù)給子組件

〔2〕父組件訪問子組件中的數(shù)據(jù)

a〕在子組件中使用vm.$emit(事件名,數(shù)據(jù))出發(fā)一個(gè)自定義事件，事件名自定義

b〕父組件在使用子組件的地方監(jiān)聽子組件觸發(fā)的事件，并在父組件中定義辦法，用來獲取數(shù)據(jù)

例如：

必須有且只有一個(gè)根元素-->

我是hello父組件

訪問自己的數(shù)據(jù)：{{msg}}、{{name}}、{{age}}、{{user.id}}

訪問子組件中的數(shù)據(jù)：{{h_sex}}，{{h_height}}

我是world子組件

訪問父組件中的數(shù)據(jù)：{{message}},{{age}},{{name}},{{user.username}}

將子組件中的數(shù)據(jù)向上發(fā)送到父組件

mui.init()

varvm=newVue({//根組件

el:"#content",

components:{

'my_hello':{//父組件

template:"#hello",

methods:{

getData(sex,height){

console.log(sex);

console.log(height);

this.h_sex=sex;

this.h_height=height;

}

},

data(){

return{

msg:'hello',

name:'jack',

age:23,

user:{

id:2022311951,

username:'yxc'

},

h_sex:'',

h_height:''

}

},

components:{

'my_world':{//子組件

data(){

return{

sex:'male',

height:100

}

},

template:'#world',

//props:['message','age','user']//接收父組件傳過來的數(shù)據(jù)

props:{//也可以是對象,允許配置高級設(shè)置,如類型判斷,數(shù)據(jù)校驗(yàn),設(shè)置默認(rèn)值

message:String,

age:{

type:Number,

default:18,

validator:function(value){

returnvalue>=0;

}

},

name:{

type:String,

required:true,

},

user:{

type:Object,

default:function(){//對象或數(shù)組的默認(rèn)值必須使用函數(shù)的屬性來返回

return{

id:2022311950,

username:'jack'

};

}

}

},

met