<div id="app">
{{msg}}
<logn v-bind:fuzujian="msg" ></logn>
app控制的區域為父組件 logn為私有的子組件
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"這是父組件的內容"
},
methods: {},
components:{
data(){
return{
info:"<h1 >這是私有組件的data值</h1>",
name:"aaaa"
}
},
'logn':{
// 自組件想要拿到父組件的值，就要使用props進行接受
template:'<h1 @click="change">這是私有組件--{{fuzujian}}</h1>',
props:['fuzujian'],
methods: {
change(){
this.fuzujian="啊啊啊"
}
},
},
}
})
</script>
總結：1、子組件想要獲取父組件的data值，要在父組件控制區域的組件標簽中添加一個屬性，該屬性就等於，你想要看到的父組件的data值，，例子中 <logn v-bind:fuzujian="msg" ></logn>
2、在子組件中使用props：['fuzujian'] .用來接受定義的屬性
3、在子組件的template，模板字符串上面，將接受過來的屬性使用{{fuzujian}}，就可以進行展示
4、子組件可以修改自己data里面的數據（自組件的data必須是一個函數，並且return一個對象），對於接受過來的父組件的data值只能進行查看（盡管可以進行修改，但是控制台會報錯，建議修改）