VUE父组件和子组件的双向修改

众乐乐_2008

已于 2023-11-24 18:18:14 修改

阅读量43

点赞数

分类专栏： VUE 文章标签： vue.js 前端 javascript

于 2023-11-24 17:49:36 首次发布

本文链接：https://blog.csdn.net/liuruiaaa/article/details/134604069

版权

VUE 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双向修改</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <login  v-model="userName"></login> {{ userName }}
        <br/>
        <label>姓名2:</label><input v-model="userName">
    </div>
    <script>
        Vue.component('login', {
            template: `
                <div class="input-group">
                    <label>姓名1:</label>
                    <input v-model="text">
                </div>
            `,
            props:['value'],
            data() {
                return {
                    text: ""
                }
            },
            watch: {
                value(newVal) {
                    this.text = newVal //这里通过监听父组件的value的变化，修改子组件的变量
                },
                text(newVal) {
                    this.$emit('input', newVal) //这里通过 $emit 修改父组件的变量
                }
            }
        })

        let vm = new Vue({
            el: '#app',
            data: {
                userName: ''
            }
        })
    </script>
</body>

</html>