v-model与.sync组件通信

父组件：

<template>
  <div class="hello">
    <h1>{{ name }}</h1>
    <test v-model="name" />
    <h1>{{ isShow }}</h1>
    <sonSync ref="test" :refbool.sync="isShow"></sonSync>
  </div>
</template>

<script>
import Test from "./son";
import SonSync from "./sonSync";
export default {
  name: "HelloWorld",
  components: {
    Test,
    SonSync,
  },
  data() {
    return {
      isShow: true,
      name: 111,
    };
  },
};
</script>
<style scoped>
</style>

 

1.v-model(vue2.0)

v-model 语法糖本质是 

<test v-model="name" />

<test :value="name" @input="onInput"/>

可以很明显得看出来可以拿组件去接收props和回调emit

子组件接收和回调:

<template>
    <div @click="cli">{{ msg }}</div>
</template>

<script>
export default {
  props: {
    value: Number,
  },
  data() {
    return {
      msg: this.value,
    };
  },
  methods: {
    cli: function () {
      this.msg += 1;
      this.$emit("input", this.msg);
    },
  },
};
</script>

 

2. .sync(vue2.0)

.sync 的语法糖本质是 

<sonSync  :refbool.sync="isShow"></sonSync>

<sonSync  :refbool="val"  @update:refbool="value => val = value"></sonSync>

可以很明显得看出来可以拿组件去接收props和回调emit

子组件接收和回调:

<template>
  <button type="default" @click="ok">子组件点击</button>
</template>

<script>
export default {
  props: {
    refbool: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    ok() {
      this.$emit("update:refbool", !this.refbool);
    },
  },
};
</script>

.sync对比v-model的优势是可以用多个属性，而不像v-model只有一个value

 

3.v-model (vue3.0)

在vue3.0中不可以使用.sync了，必须使用v-model了。

但是使用v-model又跟2.0又不太一样

v-model(3.0)的语法糖本质是 

<ChildComponent v-model="pageTitle" />
<!-- 简写: -->
<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>
若要多个，可以自定义名称：

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />
<!-- 简写： -->
<ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"
/>

 

父组件还是一样，用v-model

子组件接收和回调:

<template>
  <input type="text" :value="modelValue" @input="textInput" />
</template>

<script>
export default {
  props: {
    modelValue: String,
    meta: Object,
  },
  methods: {
    textInput: function (e) {
      this.$emit("update:modelValue", e.target.value);
    },
  },
};
</script>

在3.0中组件上 v-model 用法已更改

• 自定义v-model时，prop和事件默认名称已更改：
  prop: value -> modelValue
  event: input -> update:modelValue
• .sync和组件的model选项已移除，可用v-model作为替代
• 现在可以在同一个组件上使用多个 v-model 进行双向绑定；
• 现在可以自定义 v-model 修饰符
  比如自定义v-model.capitalize,绑定为字符串第一个字母的大写