手记

【备战春招】第9天 6-17 v-model参数的用法

课程章节:6-17 v-model参数的用法

课程讲师: 双越

课程内容:

6-17 v-model参数的用法

课程收获:

作用:实现传递数据到子组件,修改子组件数据同步到父组件

<template>
    <input :value="name" @input="$emit('update:name', $event.target.value)"/>
    <input :value="age" @input="$emit('update:age', $event.target.value)"/>
</template>

<script>
export default {
    name: 'UserInfo',
    props: {
        name: String,
        age: String
    }
}
</script>
template>
    <p>{{name}} {{age}}</p>

    <user-info
        v-model:name="name"
        v-model:age="age"
    ></user-info>
</template>

<script>
import { reactive, toRefs } from 'vue'
import UserInfo from './UserInfo.vue'

export default {
    name: 'VModel',
    components: { UserInfo },
    setup() {
        const state = reactive({
            name: '双越',
            age: '20'
        })

        return toRefs(state)
    }
}
</script>

谢谢老师,讲的非常细致,很容易懂。这一节学的是vue3用v-model参数的用法,为以后的学习打下了基础。
原来vue3能有这么多种性质,以及对vue3有了新的认识,期待后边的学习

0人推荐
随时随地看视频
慕课网APP