版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/vivian_1122/article/details/88773440
$emit（）
子组件传值给父组件需要用到 $emit()方法
这个方法可以传递两个参数：一个事件名称，一个是需要传递的数据<!DOCTYPE html>
<html lang="en">
<head>
<title>子组件传值给父组件</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<father></father>
</div>
<script>
Vue.component('father', {
template: '<div>我是父组件<p>我忘记了我的儿子叫{{mySonName}}</p><son @tellFatherMyname="getMySonName"></son></div>',
data() {
return {
mySonName: ''
}
},
methods: {
getMySonName(data) {
console.log(data)
this.mySonName = data
}
},
components: {
son: {
data() {
{
return {
myName: '小明'
}
}
},
template: '<button @click="emitMyName">我是儿子，我的名字叫{{myName}}</button>',
methods: {
emitMyName() {
//子组件传值给父组件需要用到$emit()方法，这个方法可以传递两个参数，一个是事件名称，
//一个是需要传递的数据
this.$emit('tellFatherMyname', this.myName)
}
},
}
}
})
var vm = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>