vue2与vue3使用emit传值，v-model和.sync的区别

一、v-model和.sync的区别

我们下面的例子只有一个双向绑定值其实是可以使用input的

.sync与v-model区别是
相同点：
    都是语法糖，都可以实现父子组件中的数据的双向通信。
区别点：
    格式不同。 
     v-model="num"    v-model： @input + value
    :num.sync="num"   :num.sync: @update:num
     v-model只能用一次，子组件只能用一次v-model双向绑定
     使用： $emit('input',父级监听到的值)
     例如：
        <userAvatar v-model="user.avatar" />
    .sync可以有多个，子组件可以用.sync双向绑定很多次
    使用：$emit('update:变量名',父级监听到的值)
    例如：
        <userAvatar :avatar.sync="user.avatar" :avatar1.sync="user.avatar1" :avatar2.sync="user.avatar2"/>

v-model只能用一次，如果还要绑定别的双向绑定要用.async，
.async和v-model是可以同时使用的
<userAvatar v-model="user.avatar" :avatar.sync="user.avatar" :avatar1.sync="user.avatar1" :avatar2.sync="user.avatar2"/>

 二、vue2写法

父组件：

<template>
  <div class="text-center">
    //第一步：绑定值
    <userAvatar :avatar.sync="user.avatar" />
   </div>
</template>
<script>
    //第二步：引入组件
    import userAvatar from "./userAvatar";
    export default {
    //第三步：注册组件
      components: { userAvatar},
      data() {
        return {
          //第四步：声明绑定值
          user: {
            avatar:''
          },
        };
    },
</script>

子组件：

<template>
  <div>
    <div class="user-info-head" @click="editCropper()">
    //第五步：绑定子组件里的值
      <img
        v-bind:src="options.img"
        title="点击上传头像"
        class="img-circle img-lg"
      />
    </div>
    <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
</template>
<script>
export default {
  data() {
      //第六步：声明绑定值
      options: {
        img:'', 
       }
   }
   methods: {
     uploadImg() {
        //第七步：子组件使用$emit传值
        this.$emit('update:avatar', this.options.img);
     }
   
   }
}

三、vue3写法

父组件：

<template>
 <div class="text-center">
    //第一步：v-model绑定子组件的值
   <userAvatar  v-model:avatar="state.user.avatar"/>
 </div>
</template>
<script setup name="Profile">
//第二步：引入组件
import userAvatar from './userAvatar'
//第三步：声明
const state = reactive({
  user: {},
})
</script>

子组件：

<template>
  <div class="user-info-head" @click="editCropper()">
    //第四步：绑定值
    <img :src="options.img" title="点击上传头像" class="img-circle img-lg" />
  </div> 
    <el-button type="primary" @click="uploadImg()">提 交</el-button>
     
</template>
<script setup>
//第五步：(有时候需要引入defineEmits)
import {defineEmits} from 'vue'
//第六步：声明emit
const emit = defineEmits(['update:avatar'])
function uploadImg() {
  // 第七步：使用emit
  emit('update:modelValue', options.img)
}
</script>

原文地址：https://blog.csdn.net/m0_45827438/article/details/140527832

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！