Vue3编程模型：内部数据V.S.父子数据====>双向绑定v-model

父子组件双向绑定模型

v-model双向绑定

内部数据：

import {ref} from 'vue'
setup(){
    const checked = ref(false)
    const toggle = ()=>{
        checked.value = !checked.value
    }
    return {checked,toggle}
}

父子数据：

父组件传入数据

子组件接受数据，并通过事件监听通知父组件修改数据

双向绑定

• 将事件名改为update:<监听的变量名>
• 在绑定事件的前面加上v-model

这是Vue3和Vue2的一个不同点

组件事件 | Vue.js (vuejs.org)

• vue3中新的v-model代替以前的v-model和.sync
• 新增context.emit，与this.$emit作用相同

但是更多使用的是context.emit，因为数据的写入可以用setup做到，就不需要methods和周期函数了。