vue组件实现双向绑定

最新推荐文章于 2024-08-22 15:37:44 发布

明星大侦探

最新推荐文章于 2024-08-22 15:37:44 发布

阅读量2.6k

点赞数 2

分类专栏：网站开发知识文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/weixin_43729025/article/details/120144964

版权

网站开发知识专栏收录该内容

5 篇文章 1 订阅

订阅专栏

本文详细介绍了在Vue中如何实现组件的双向绑定，包括使用`.sync`修饰符和`v-model`。通过示例代码展示了在父组件和子组件之间如何传递并更新数据，以及如何在多个参数绑定时提高代码的可维护性和可读性。

摘要由CSDN通过智能技术生成

实现vue组件双向绑定

vue组件双向绑定可以使用传参方式父传子、子传父的传统方式去绑定，但是本篇文章将记录如何使用.async、v-model的形式完成父子组件的双向绑定。

使用.async双向绑定

在父组件以 :[子组件变量].sync="[父组件变量名]"的格式绑定

<template>
  <div class="index">
    <!-- 写法一：绑定单个值 -->
    <div @click="setChild">我是父元素:{{ msg }}</div>
    <child :syncText.sync="msg" />
  </div>
</template>

<script>
// 导入子组件
import child from "./child.vue";
export default {
  // 引入父组件中
  components: {
    child
  },
  name: "index",
  data() {
    return {
      msg: "AAA"
    };
  },
  methods: {
    setChild() {
      this.msg += 2;
    }
  },
};
</script>

在子组件以 props:[“子组件变量名”] 的格式绑定

<template>
  <div class="childs" @click="sendToFather()">我是子元素{{ syncText }}</div>
</template>
<script>
export default {
  name: "child",
  data() {
    return {};
  },
  props: ["syncText"],
  methods: {
    sendToFather() {
      this.$emit("update:syncText", this.syncText + 1);
    },
  },
};
</script>

绑定完成后修改值

父组件：直接修改父元素变量，父子组件的值都会改变

this.msg += 2;

子元素：使用 $(“update:[子元素变量]”,[需要修改成的值])，同时是父子组件的值都会改变

this.$emit("update:syncText", this.syncText + 1);

绑定多个参数

如果是在绑定参数较多的情况下，:a.sync=“a” :b.sync=“b” :c.sync=“c” :d.sync=“d” 这样绑定多个参数，会在维护和易读性上造成不便，所以我们可以使用对象的方式去绑定。
父组件中这样修改：

<child v-bind.sync="obj"/>

  // 绑定的参数
  data() {
    return {
      obj: {
        a: "123",
        b: "456",
        c: "789",
      },
    };
  }

子组件中这样接收：

  props: ["a","b","c"],

v-model方法双向绑定子组件

在子组件通过v-model=‘[父组件变量]’的形式绑定

<template>
  <div>
    <div @click="setMsg">我是父元素：{{ msg }}</div>
    <!-- 通过绑定change方法监听子组件回调 -->
    <child v-model="msg" @change="intch" />
  </div>
</template>

<script>
import child from "./child.vue";
export default {
  components: {
    child,
  },
  name: "index",
  data() {
    return {
      msg: "",
    };
  },
  methods:{
    setMsg(){
      this.msg += 1;
    },

    intch(e){
      console.log(e)
    },
  }
};
</script>

在子组件中通过props接收，默认的参数名为value

<template>
  <div>我是子元素：{{value}}</div>
  <div>
    <label>
      <input type="text" :value="value" @input="setValue"/>
      <button @click="callValue">提交</button>
    </label>
  </div>
</template>
<script>
export default {
  name: "child",
  data() {
    return {};
  },
  props: ["value"],
  methods: {
  	// 通过调用input方法同时修改父子组件绑定的参数
    setValue(e) {
      this.$emit("input", e.target.value);
    },
	// 通过调用change方法可以触发父组件监听事件
    callValue(e){
      this.$emit("change", this.value);
    }
  },
};
</script>