<!--
* @Descripttion:
* @version:
* @Author: zhangfan
* @email: 2207044692@qq.com
* @Date: 2020-05-13 14:52:34
* @LastEditors: zhangfan
* @LastEditTime: 2021-01-29 14:27:02
-->
<template>
<div>
<h1>标题:{{ title }}</h1>
<!-- <textcom v-on:update:titleList="title = $event"></textcom> -->
<!-- 为了方便起见,我们为这种模式提供一个缩写,即 .sync 修饰符: -->
<textcom :titleList.sync="title"></textcom>
</div>
</template>
<script>
import Vue from "vue";
Vue.component("textcom", {
template: `<div>
<span>我是子组件</span>
<button @click="sendmessage">子组件向父组件传值</button>
</div>`,
data() {
return {
newTitle: "我是来自子组件的数据",
};
},
methods: {
sendmessage() {
this.$emit("update:titleList", this.newTitle);
},
},
});
export default {
data() {
return {
title: "",
};
},
};
</script>
<style>
</style>
vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。如果我们不用.sync,我们也可以props传初始值,然后事件监听,从而实现子组件向父组件传值。