通过自定义事件可以实现vue组件”子->父”的数据传递
由子组件$emit事件的名称,父组件监听这个名称的事件,事件名称的命名推荐使用 “kebab-case” 的形式。
下面代码中,子组件给父组件传递了一个弹框信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<child-div @alert="notice" :msg="msg"></child-div>
</div>
<script>
Vue.component('child-div', {
template: '<div @click="childNotice">点我,父组件弹通知</div>',
methods:{
childNotice: function(){
this.$emit('alert', 'Hello Vue');
}
}
});
let app = new Vue({
el: '#app',
methods:{
notice: function(msg){
alert(`来自子组件:${msg}`);
}
}
});
</script>
</body>
</html>
.sync 修饰符 (2.3.0+ 新增)
举个例子,在一个包含 title prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图:
this.$emit('update:title', newTitle)
然后父组件可以监听那个事件并根据需要更新一个本地的数据属性。例如:
<text-document
v-bind:title="doc.title"
v-on:update:title="doc.title = $event"
></text-document>
为了方便起见,我们为这种模式提供一个缩写,即 .sync 修饰符:
<text-document v-bind:title.sync="doc.title"></text-document>
当我们用一个对象同时设置多个 prop 的时候,也可以将这个 .sync 修饰符和 v-bind 配合使用:
<text-document v-bind.sync="doc"></text-document>
这样会把 doc 对象中的每一个属性 (如 title) 都作为一个独立的 prop 传进去,然后各自添加用于更新的 v-on 监听器。