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>