1.父組件向子組件傳值 :
父組件在引用子組件的時候,通過屬性綁定的(v-bind)的形式, 把數(shù)據(jù) 傳遞給子組件 供子組件使用
1.1 :在子組件上綁定屬性 如 (msg是父組件中定義的數(shù)據(jù))
<com :parentmsg="msg"></com>
1.2:在子組件props[]數(shù)組中 定義一下父組件傳遞過來的 parentmsg 屬性 如 props:[parentmsg]
這樣之后在子組件中要用到父組件中msg數(shù)據(jù)時 就可以 在子組件中 用 parentmsg來代替msg了
注意 props中定義的 是只讀的,無法重新賦值,data中的數(shù)據(jù)是可讀可寫的
結合下面代碼 參考
<body>
<div id="app">
<!-- 父組件可以在引用子組件的時候， 通過 屬性綁定（v-bind:） 的形式, 把 需要傳遞給 子組件的數(shù)據(jù)，以屬性綁定的形式，傳遞到子組件內部，供子組件使用 -->
<com1 v-bind:parentmsg="msg"></com1>
</div>
<script>
// 創(chuàng)建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '123 啊-父組件中的數(shù)據(jù)'
},
methods: {},
components: {
// 結論：經過演示，發(fā)現(xiàn)，子組件中，默認無法訪問到 父組件中的 data 上的數(shù)據(jù) 和 methods 中的方法
com1: {
data() { // 注意： 子組件中的 data 數(shù)據(jù)，并不是通過 父組件傳遞過來的，而是子組件自身私有的，比如： 子組件通過 Ajax ，請求回來的數(shù)據(jù)，都可以放到 data 身上；
// data 上的數(shù)據(jù)，都是可讀可寫的；
return {
title: '123',
content: 'qqq'
}
},
template: '<h1 @click="change">這是子組件 --- {{ parentmsg }}</h1>',
// 注意： 組件中的 所有 props 中的數(shù)據(jù)，都是通過 父組件傳遞給子組件的
// props 中的數(shù)據(jù)，都是只讀的，無法重新賦值
props: ['parentmsg'], //把父組件傳遞過來的 parentmsg 屬性，先在 props 數(shù)組中，定義一下，這樣，才能使用這個數(shù)據(jù)
directives: {},
filters: {},
components: {},
methods: {
change() {
this.parentmsg = '被修改了'
}
}
}
}
});
</script>
</body>
2.父組件向子組件傳遞方法
父組件向子組件傳遞方法 我們要用到事件綁定機制v-on 來綁定一個屬性指向父組件中的方法 然后在子組件的methods方法中用 this.$emit('綁定的屬性') 來定義一下即可調用父組件中的方法了
補充 如果父組件的方法需要傳參的話, 則在this.$emit('綁定的屬性',參數(shù)) 其實這樣也可以向父組件傳遞數(shù)據(jù)了
話不多說看代碼
<body>
<div id="app">
<!-- 父組件向子組件 傳遞 方法，使用的是 事件綁定機制； v-on, 當我們自定義了 一個 事件屬性之后，那么，子組件就能夠，通過某些方式，來調用 傳遞進去的 這個 方法了 -->
<com2 @func="show"></com2>
</div>
<template id="tmpl">
<div>
<h1>這是 子組件</h1>
<input type="button" value="這是子組件中的按鈕 - 點擊它，觸發(fā) 父組件傳遞過來的 func 方法" @click="myclick">
</div>
</template>
<script>
var com2 = {
template: '#tmpl', // 通過指定了一個 Id, 表示 說，要去加載 這個指定Id的 template 元素中的內容，當作 組件的HTML結構
data() {
return {
sonmsg: { name: '小頭兒子', age: 6 }
}
},
methods: {
myclick() {
// 當點擊子組件的按鈕的時候，如何 拿到 父組件傳遞過來的 func 方法，并調用這個方法？？？
// emit 英文原意： 是觸發(fā)，調用、發(fā)射的意思
// this.$emit('func123', 123, 456)
this.$emit('func', this.sonmsg)
}
}
}
// 創(chuàng)建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
datamsgFormSon: null
},
methods: {
show(data) {
// console.log('調用了父組件身上的 show 方法: --- ' + data)
// console.log(data);
this.datamsgFormSon = data
}
},
components: {
com2
// com2: com2
}
});
</script>
</body>
