Vue3的v-model以及传值

Vue3：v-model

一、v-model：双向绑定

Vue3：v-model规定：

• 属性名任意(假设为xxx)，事件名必须为update:xxx
• 效果：未用v-model

<Switch :value="value" @update:value="value=$event"/>

• 使用v-model

<Switch v-model:value="value"/>

详情可查看官网

二、emit

新增emit用法，与this.$emit作用相同
注意：新增emit没有 ''多乐'' 符

setup(props, context) {
      context.emit('update:value', newValue); //事件名 ，事件参数
    };
=======
method(){
    this.$emit('update:value', newValue)
}

$event的值是emit的第二个参数

知识点

• props：由外部传值
• emit：通过$event接受由内部传出的值
• 两者结合实现了子父组件之间通信，该方法较为常用，于是尤雨溪设计了v-model将两者结合

三、多个props怎么传值

方法：需要传几个写几个context.emit
例：

props: {
    value: Boolean
    xxx:String
  },
  setup(props, context) {
      context.emit('update:value', new-value);
      context.emit('update:xxx', new-xxx);
  }

以此类推

v-model.png