Vue父元件向子元件傳值以及data和props的區別詳解
阿新 • • 發佈：2020-03-03
1.在父元件中定義 msg 屬性
data:{
msg:'123 -我是父元件中的資料'
},
2.引用子元件
父元件可以在引用子元件的時候，通過屬性繫結的形式，把需要傳遞給子元件的資料，以屬性繫結的形式，傳遞到子元件內部，供子元件使用。
把父元件傳遞過來的 msg 屬性，繫結到子元件的 parentmsg 屬性上。
<com1 :parentmsg="msg"></com1>
3. 在子元件定義部分，需要把父元件傳遞過來的 parentmsg 屬性，先在props陣列中定義一下（代表這個屬性是由父元件傳遞過來的），這樣，才能使用這個資料
props:['parentmsg'],
4.在子元件中使用
template:"<h1>這是子元件--{{parentmsg}}</h1>",
5.子元件中data和props的區別
子元件中的data資料，不是通過父元件傳遞的是子元件私有的，是可讀可寫的。
子元件中的所有 props中的資料，都是通過父元件傳遞給子元件的，是隻讀的。
完整程式碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id='app'>
<!-- 父元件可以在引用子元件的時候，通過屬性繫結的形式，把需要傳遞給子元件的資料，
以屬性繫結的形式，傳遞到子元件內部，供子元件使用 -->
<com1 :parentmsg="msg"></com1>
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',data:{
msg:'123-我是父元件中的資料'
},components:{
//子元件中無法訪問父元件的data和methods
com1:{
//子元件中的data資料，不是通過父元件傳遞的是子元件私有的
//data上的資料，是可讀可寫的
data(){
return {
title:'123',content:'qqq'
}
},template:"<h1>這是子元件--{{parentmsg}}</h1>",//注意，元件中的所有 props中的資料，都是通過父元件傳遞給子元件的
//只讀
props:['parentmsg'],//把父元件傳遞過來的parentmsg屬性，
//先在props陣列中定義一下，這樣，才能使用這個資料
methods:{
}
}
}
})
</script>
</html>
到此這篇關於Vue父元件向子元件傳值以及data和props的區別詳解的文章就介紹到這了,更多相關Vue父元件向子元件傳值內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！