注释很详细，直接上代码

上一篇

新增内容

1. v-model 原理解析
2. v-model 组件双向绑定示范

源码

MyTest.vue

<template><div id="MyTest"><select :value="value" @change="handleChange"><option value="广东">广东</option><option value="上海">上海</option><option value="北京">北京</option></select></div>
</template><script>javascript">export default {data() {return {};},// 接收父组件传过来的数据props: {//value是固定的，因为v-model相当于的值名是valuevalue:String},methods:{handleChange(e){//input是固定的，因为v-model相当于的事件名是inputthis.$emit('input',e.target.value)}}
};
</script><style lang="less" scoped>
</style>

App.vue

<template><div id="app"><!-- 相当于:value+@input,个人感觉虽然简单但似乎不能自行命名传值或许有但我还没见过，下一篇介绍一种更灵活的方法--><MyTest v-model="city"/></div>
</template>
<script>javascript">
// 导入局部注册组件
import MyTest from "./components/MyTest.vue";
export default {name: "App",components: {//注册局部注册组件MyTest},data() {return {city:'北京'};},methods: {},
};
</script>
<style>
</style>

效果演示