Vue组件间的双向绑定怎么实现寻技术

这篇“Vue组件间的双向绑定怎么实现”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue组件间的双向绑定怎么实现”文章吧。

何为组件间双向绑定

我们都知道当父组件改变了某个值后，如果这个值传给了子组件，那么子组件也会自动跟着改变，但是这是单向的，使用

v-bind

的方式，即子组件可以使用父组件的值，但是不能改变这个值。组件间的双向绑定就是对于父组件的变更，子组件可以感知到，同样对于子组件的变更，父组件也可以感知到。这个过程是自动的。Vue中的双向绑定用

v-model

来实现

示例解析

这里我们还是以一个计数器组件来介绍Vue的双向绑定，我们定义一个Div显示一个数，当我们点击这个数的时候，让这个数加1，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件间双向绑定</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
 const app = Vue.createApp({
    data() {
        return {
            count:1
        }
    },
    methods:{
        handleCountOneChange(count){
            this.count = count;
        }
    },
        template: 
        `
        <div>
            <counter v-model:count = "count"  @change-count-one="handleCountOneChange"/>
        </div>
        `
    });
    app.component('counter',{
      props:['count'],
        methods: {
            handleItemClick(){
                 this.$emit('change-count-one',this.count + 1);
            },
        },
        template:
        `<div @click="handleItemClick">{{count}}</div>
        `
    });
    const vm = app.mount('#root');
</script>
</html>

在之前我们要将父组件传过来的值做加一操作的时候，由于是单向数据流，我们只能把父组件传来的值先拷贝一份到子组件，然后让子组件去改变自己的这个值来达到子组件的计数效果，本节所讲的双向数据绑定可以在子组件中将这个值加一后传到父组件，父组件收到这个值以后又会同步给子组件，这样就完成了一个计数器。如上面代码所示，父组件通过v-model的方式将count传给子组件，子组件收到这个值后，当用户点击了div后，就会执行handleItemClick方法，这个方法会通过事件的方式，将count+1的值通知给父组件，父子组件由于是双向绑定的，所以这个count的值又会被子组件感知到然后子组件就显示了count+1 的值了，如此循环，点击一次，值就加一。就完成了counter组件的计数功能了。

这里需要注意的是，父组件传递值的时候用法是： v-model:count = "count" 不要忘记后面的“:count”少了是无法显示的

那假设我们不想使用

:count

的方式呢，那就可以用指定的一个关键字

modelValue

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件间双向绑定</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
 const app = Vue.createApp({
    data() {
        return {
            count:1
        }
    },
    methods:{
        handleCountOneChange(count){
            this.count = count;
        }
    },
        template: 
        `
        <div>
            <counter v-model = "count"  @change-count-one="handleCountOneChange"/>
        </div>
        `
    });
    app.component('counter',{
      props:['modelValue'],
        methods: {
            handleItemClick(){
                 this.$emit('change-count-one',this.modelValue + 1);
            },
        },
        template:
        `<div @click="handleItemClick">{{modelValue}}</div>
        `
    });
    const vm = app.mount('#root');
</script>
</html>

注意此处只能叫modelValue,其他的名字都不可以。

本文地址：https://www.xunjs.com/vue/view_20481.html

Tags： Vue组件双向绑定

相关推荐