vue3学习心得

1、组件v-model
与其说组件v-model，倒不如说，父子组件通讯的双向邦定，我倒喜欢这样子去理解。就好比，我在子组件内有一个input框，然后，这个框的值会跟父组件定的属性一起变化。

<!--子组件 AttComponent-->
<template>
    <div class="container">
        <div class="" style="border: 1px solid red;">
            <h2>父子组件的双向邦定</h2>
            <div class="">
                <input type="text" :value="test" @input="$emit('update:test' , $event.target.value)">
            </div>
        </div>
    </div>
</template>

<script setup>
    import {
      
       ref } from 'vue'
    const emit = defineEmits(['update:test'])    //注意【update:test】需要跟html中定义的一致
    const pops = defineProps({
      
      
        test:{
      
      
            type:String,
            default:'hello world'
        }
    })
</script>
<style scoped></style>

<!--父组件-->
<template>
    <div class="container">
        <div>
            <Att-component v-model:test="test"></Att-component>
            <!--也就是说，当然在input框里的值发生变化时，test也会发生娈化-->
            <p>{
   
   { test }}</p>
        </div>
    </div>
</template>

<script setup>
    import AttComponent from '../components/AttComponent.vue'
    import {
      
       ref } from 'vue'
    const test = ref('你好');
</script>
<style scoped></style>

猜你喜欢