二.在Vue3.0优雅的使用v-model,父子传值

Vue2.0Vue3.0中使用v-model

在Vue2.0中如何实现双向数据绑定呢?常用的方式又两种,一种是v-model,另一种是.sync,为什么会有两种呢?这是因为一个组件只能用于一个v-model,但是有的组件需要有多个可以双向响应的数据,所以就出现了.sync。在Vue3.0中为了实现统一,实现了让一个组件可以拥有多个v-model,同时删除掉了.sync。如下面的代码,分别是Vue2.0与Vue3.0使用v-model的区别。

在Vue2.0中使用v-model

<template>
  <a-input v-model="value" placeholder="Basic usage" />
</template>
<script>
export default {
  data() {
    return {
      value: '',
    };
  },
};
</script>

在Vue3.0中使用v-model

在vue3.0中,v-model后面需要跟一个modelValue,即要双向绑定的属性名,Vue3.0就是通过给不同的v-model指定不同的modelValue来实现多个v-model

在使用v-model需要指定modelValue
<template>
  <!--在使用v-model需要指定modelValue-->
  <custom-input v-model:value="state.inputValue"></custom-input>
</template>
<script>
import { reactive } from "vue";
import CustomInput from "../components/custom-input";
export default {
  name: "Home",
  components: {
    CustomInput
  },
  setup() {
    const state = reactive({
      inputValue: ""
    });
    return {
      state
    };
  }
};
</script>

父子传

<template>
    <div>
        <div>这里是modelFather</div>
       //v-model:ShowName="state.name"
       //ShowName 自定义属性名
      //state.name属性值
        <ModelChildren
            v-model:ShowName="state.name"
            v-model:ShowEmail="state.email"
            v-model:ShowPhone="state.phone"
        />
    </div>
</template>

<script>
import ModelChildren from './ModelChildren.vue'
import { reactive } from 'vue'
export default {
    components: {
        ModelChildren
    },
    setup() {
        const state = reactive({
            name: '',
            email: '',
            phone: ''
        })
        return {
            state
        }
    }
}
</script>

<template>
    <div>
// $emit('update:ShowName', $event.target.value)
//  $emit('update广播
// ShowName 属性名 要和父组件的自定义名称一致
// 改变赋值
        <input type="text" placeholder="请输入姓名" :value="ShowName" @input="$emit('update:ShowName', $event.target.value)"><br>
        <input type="text" placeholder="请输入邮箱" :value="ShowEmail" @input="$emit('update:ShowEmail', $event.target.value)"><br>
        <input type="text" placeholder="请输入电话" :value="ShowPhone" @input="_handleChangeValue" />{{ShowPhone}}
    </div>
</template>
<script>
export default {
    props: {
        ShowName: {
            type: String,
            default: ""
        },
        ShowEmail: {
            type: String,
            default: ""
        },
        ShowPhone: {
            type: String,
            default: ""
        }
    },
    setup(props, {emit}) {
        function _handleChangeValue($event) {
            emit('update:ShowPhone', $event.target.value)
        }
        return {
            _handleChangeValue
        }
    }
    
}
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容