引言
開始時我們先來用之前的父組件向子組件傳遞數據的知識完成下面這個問題
- 父組件如何向子組件傳遞一個方法呢？
總結來說就一句話: 通過事件綁定機制，將父組件上的方法傳遞給子組件
我們需要用到的東西
- vue實例，並在實例上定義一個方法
- 創建子組件
// 1
var vm = new Vue({
el : "#app",
methods: {
show(){
console.log(’我是父組件上的方法‘);
},
})
// 2
<template id="tem">
<div>
<h3>我是子組件</h3>
// 點擊button按鈕，通過$emit實例api自定義方法
<button @click="button">觸發父組件傳遞過來的方法</button>
</div>
</template>
Vue.component('tem-app',{
template : '#tem',
methods: {
button(){
// vm.$emit( eventName, […args] ) :
// 觸發當前實例上的事件
// 參數一，實例[父組件]定義的方法【事件名稱】
// 參數二，可選的，子組件向父組件傳遞的數據，可以是多個，
this.$emit('func')
}
},
})
// 3
ok ,再來看看我們vue實例所要控制的區域
<div id="app">
// 父組件通過綁定了一個由子組件定義的方法，將自己身上的方法傳遞過去
<tem-app @func="show"></tem-app>
</div>
這樣我們就完成了，父組件向子組件傳遞一個方法的問題了
我通過上面的例子再來看看
- 如何往父組件傳遞數據?
- 這其實很簡單
- 通過 $meit方法的第二個參數，將數據傳遞過去，父組件方法接收子組件傳遞過來的數據即可
var obj = {
name : "張三",
age : 18,
sex : "男"
}
// vue實例
var vm = new Vue({
el : "#app",
methods: {
show(obj){
// 父組件拿到子組件傳遞過來的數據
console.log(obj)
}
},
})
完整代碼
<body>
<!--
通過事件綁定機制，將父組件上的方法傳遞給子組件,
子組件通過第二的參數將數據傳遞給父組件
-->
<div id="app">
<tem-app @func="show"></tem-app>
</div>
<template id="tem">
<div>
<h3>我是子組件</h3>
<button @click="button">觸發父組件傳遞過來的方法</button>
</div>
</template>
<script>
var obj = {
name : '張三',
age : 12,
sex : '男'
}
Vue.component('tem-app',{
template : '#tem',
data : function(){
return {
msg : '我是子組件上的數據'
}
},
methods: {
button(){
// vm.$emit( eventName, […args] ) :
// 觸發當前實例上的事件
// 參數一，實例[父組件]定義的方法
// 參數二，可選的，子組件向父組件傳遞的數據，可以是多個，
this.$emit('func',obj)
}
},
})
var vm = new Vue({
el : "#app",
methods: {
show(obj){
// 父組件拿到子組件傳遞過來的數據
console.log(obj)
}
},
})
</script>
</body>
總結：
1. 子組件中需要以某種方式例如點擊事件的方法來觸發一個自定義事件
2. 將需要傳的值作為$emit的第二個參數，該值將作為實參傳給響應自定義事件的方法
3. 在父組件上綁定子組件$meit自定義的方法