引言
开始时我们先来用之前的父组件向子组件传递数据的知识完成下面这个问题
- 父组件如何向子组件传递一个方法呢？
总结来说就一句话: 通过事件绑定机制，将父组件上的方法传递给子组件
我们需要用到的东西
- 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自定义的方法