vue点击相同子组件调用父组件不同方法
应用场景
比如：不同的父组件用了相同的分页组件，但是点击分页组件时需要触发父组件里的不同方法
写了个小栗子如下：
<!DOCTYPE html>
<html>
<head>
<title>vue test</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="app">
{{ message }}
<p>点击下面两个组件测试</p>
<!--相同的子组件 分别调用父组件不同的方法-->
<my-component fn="A"></my-component>
<my-component fn="B"></my-component>
</div>
</body>
<script>
window.onload = function() {
//第三方变量 实现组件通信
var trans= new Vue()
// 定义组件
var MyComponent = Vue.extend({
data: function() {
return {
intro: 'hello'
}
},
//接收父组件传入的值
props: ['fn'],
template: '<div @click="a">A custom component! {{intro}} i am {{fn}}</div>',
methods: {
a: function() {
//通过传入的值区分调用的方法
trans.$emit(this.fn)
}
}
})
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
components: {
'my-component': MyComponent
},
created: function() {
trans.$on("A", function() {
alert('A')
});
trans.$on("B", function() {
alert('B')
})
}
})
}
</script>
</html>
效果如下
点击A组件
点击B组件
