vue快速入门（三十九）.sync简化组件双向绑定（推荐）

注释很详细，直接上代码

上一篇

新增内容

1. .sync 原理解析
2. .sync 组件双向绑定示范

源码
MyTest.vue

<template>
  <div id="MyTest">
    <select :value="selectCity" @change="handleChange">
      <option value="广东">广东</option>
      <option value="上海">上海</option>
      <option value="北京">北京</option>
    </select>
  </div>
</template>

<script>

export default {
  data() {
    return {
    };
  },
  // 接收父组件传过来的数据
  props: {
    selectCity:String
  },
  methods:{
    handleChange(e){
      //根据之前的命名向父组件发送事件
      this.$emit('update:selectCity',e.target.value)
    }
  }
};
</script>

<style lang="less" scoped>
</style>

App.vue

<template>
  <div id="app">
    <!--
    有自定义命名selectCity作为标识，比v-model更灵活 
    相当于:selectCity="city"+
    @update:selectCity="city=子组件发送事件携带的值" -->
    <MyTest :selectCity.sync="city" />
  </div>
</template>
<script>
// 导入局部注册组件
import MyTest from "./components/MyTest.vue";
export default {
  name: "App",
  components: {
    //注册局部注册组件
    MyTest
  },
  data() {
    return {
      city:'北京'
    };
  },
  methods: {
  },
};
</script>
<style>
</style>

效果演示