<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>父組件：這是子組件傳遞過來的數據 --- {{ msg }}</h1>
<!-- 此處的方法 pfn 就是父組件中提供的屬性 -->
<!-- pfn 是父組件給子組件提供的一個屬性（事件），它的值是父組件中的一個方法 -->
<child v-on:pfn="parentFn"></child>
</div>
<script src="./vue.js"></script>
<script>
// 子組件傳遞數據給父組件：
// 1 由父組件提供的一個方法（這個方法用來接受子組件傳遞過來的數據）
// 2 這個方法需要讓子組件來調用
// 3 在子組件中調用父組件的方法，將要傳遞的數據作為 父組件方法的參數 進行傳遞
// Vue 實例看作是 父組件
var vm = new Vue({
el: '#app',
data: {
msg: ''
},
methods: {
parentFn( arg ) {
console.log(arg);
this.msg = arg
}
},
// 創建組件
components: {
// 子組件
child: {
props: ['msg', 'abc'],
template: `<button @click="test">子組件傳遞數據給父組件</button>`,
methods: {
test() {
// 通過 this.$emit 方法來觸發事件（此處是，pfn）
// 第二個參數，表示要傳遞個父組件的數據
// 內部：調用父組件的 parentFn('這是子組件中傳遞的數據')
this.$emit('pfn', '這是子組件中傳遞的數據')
}
},
// created() {
// this.$emit('pfn', 'adsfasdfdsfa')
// }
}
}
})
</script>
</body>
</html>
點擊按鈕的時候完子到父組件的通訊.png
在這里賴活還是好死
在于不在
沒那么重要
