子组件调用父组件的方法
1.注册子组件,在按钮中绑定点击事件。
2.子组件中写方法test,test中this.$emit(‘aa’),自定义事件aa
3.将aa事件和父组件的方法绑定
const login = {
template: `<div>
<h3>用户登录</h3>
<button @click="test">点击触发事件</button>
</div>`,
data: function() {
return {
msg: "子组件的信息",
user: {
id: 1,
name: '小王',
age: 100
}
}
},
methods: {
test: function() {
alert('子组件的方法')
this.$emit('aa', this.user)
}
}
};
利用this.$emit(‘aa’,this.user)第二个参数可以进行传值
const app = new Vue({
el: "#app",
data: {
msg: 'Vue',
name: '小王',
age: '100',
user: {
id: 1,
name: '小王',
age: 100
}
},
methods: {
findAll: function(msg) {
this.msg = msg;
this.user = user;
alert('父组件的方法' + msg)
}
},
computed: {},
components: {
login,
}
})