本文實例為大家解析了vue中Props的屬性，供大家參考，具體內容如下

使用?Props?傳遞數據

組件實例的作用域是孤立的。這意味著不能并且不應該在子組件的模板內直接引用父組件的數據。可以使用?props?把數據傳給子組件。

“prop”?是組件數據的一個字段，期望從父組件傳下來。子組件需要顯式地用?props?選項?聲明?props：

Vue.component(‘child’,?{

//?聲明?props

props:?['msg'],

//?prop?可以用在模板內

//?可以用?`this.msg`?設置

template:?’{{?msg?}}’

})

然后向它傳入一個普通字符串：

<

ild>

舉例

錯誤寫法：

html>

vue.js

//使用?props?傳輸資料予子組件

//props?,?data?重復名稱會出現錯誤

<

ild>

Vue.config.debug?=?true;

Vue.component(‘child’,?{

//?declare?the?props

props:?['msg','nihao','nisha'],

//?the?prop?can?be?used?inside?templates,?and?will?also

//?be?set?as?`this.msg`

template:?’{{?msg?}}{{nihao}}{{nisha}}’,

data:?function()?{

return?{

mssage:?’boy’

}

}

});

var?vm?=?new?Vue({

el:?’#app1′

})

<

ml>

正確寫法：

html>

vue.js

//使用?props?傳輸資料予子組件

//props?,?data?重復名稱會出現錯誤

<

ild>

Vue.config.debug?=?true;

Vue.component(‘child’,?{

//?declare?the?props

props:?['msg','nihao','nisha'],

//?the?prop?can?be?used?inside?templates,?and?will?also

//?be?set?as?`this.msg`

template:?’{{?msg?}}{{nihao}}{{nisha}}’

});

var?vm?=?new?Vue({

el:?’#app1′

})

<

ml>

props?傳入多個數據(順序問題)

第一種：

HTML

<

ild>

<

ild>

<

ild>

JS

Vue.config.debug?=?true;

Vue.component(‘child’,?{

//?declare?the?props

props:?['msg','nihao','nisha'],

//?the?prop?can?be?used?inside?templates,?and?will?also

//?be?set?as?`this.msg`

template:?’{{?msg?}}{{nihao}}{{nisha}}’,

/*data:?function()?{

return?{

msg:?’boy’

}

}*/

});

var?vm?=?new?Vue({

el:?’#app1′

})

結果：hello!?hello1!?hello2!

第二種：

HTML

<

ild>

<

ild>

<

ild>

JS

Vue.config.debug?=?true;

Vue.component(‘child’,?{

//?declare?the?props

props:?['msg','nihao','nisha'],

//?the?prop?can?be?used?inside?templates,?and?will?also

//?be?set?as?`this.msg`

template:?’123{{?msg?}}{{nihao}}{{nisha}}’,

/*data:?function()?{

return?{

msg:?’boy’

}

}*/

});

var?vm?=?new?Vue({

el:?’#app1′

})

結果：123hello!?123hello1!?123hello2!

第三種：

HTML

<

ild>

<

ild>

<

ild>

JS

Vue.config.debug?=?true;

Vue.component(‘child’,?{

//?declare?the?props

props:?['msg','nihao','nisha'],

//?the?prop?can?be?used?inside?templates,?and?will?also

//?be?set?as?`this.msg`

template:?’{{?msg?}}{{nihao}}{{nisha}}123’,

/*data:?function()?{

return?{

msg:?’boy’

}

}*/

});

var?vm?=?new?Vue({

el:?’#app1′

})

結果：hello!?123?hello1!?123?hello2!123

第四種：

HTML

<

ild>

<

ild>

<

ild>

JS

Vue.config.debug?=?true;

Vue.component(‘child’,?{

//?declare?the?props

props:?['msg','nihao','nisha'],

//?the?prop?can?be?used?inside?templates,?and?will?also

//?be?set?as?`this.msg`

template:?’{{?msg?}}123{{nihao}}{{nisha}}123’,

/*data:?function()?{

return?{

msg:?’boy’

}

}*/

});

var?vm?=?new?Vue({

el:?’#app1′

})

結果：hello!?123?123hello1!?123hello2!

結論：

在props?中傳入多個數據是，如果在父組件的模板類添加其他元素或者字符會有：

1-在最前面加入—每個子組件渲染出來都會在其前面加上

2-在最后面加入—每個子組件渲染出來都會在其后面加上

3-在中間加入—他前面子組件后面加上，后面的子組件后面加上

總結

以上是生活随笔為你收集整理的props写法_简单理解vue中Props属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。