vue3学习心得

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<template>
    <div class="container">
        <div>
            <Att-component v-model:test="test">Att-component>
            
            <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17