vue2使用sync修饰符父子组件的值双向绑定

最新推荐文章于 2024-06-10 13:31:44 发布

月落星河°

最新推荐文章于 2024-06-10 13:31:44 发布

阅读量1.9k

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/wangzongyang1025_/article/details/130244663

版权

文章介绍了在Vue.js中如何使用.sync修饰符实现父子组件间的双向绑定，特别是在封装弹窗组件时的应用。通过示例展示了子组件如何通过$emit更新父组件的props值，以及父组件如何初始化和修改这个值。

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

1、使用场景

当我需要对一个 prop 进行“双向绑定的时候，通常用在封装弹窗组件的时候来进行使用，当然也会有其他的使用场景，只要涉及到父子组件之间需要传参的都可以使用，尽量不要使用watch监听来进行修改值，也不要尝试直接修改props传过来的参数，可以参考官网单向数据流的方式处理。

2、.sync使用方式

以下是element封装的dialog弹窗组件，就是使用了.sync修饰符来进行控制是否弹出，我们要在项目中对dialog组件进行一个二次封装，也使用.sync的方式来实现。

在这里插入图片描述

子组件代码部分
1、props接收dialogVisible，并赋值给el-dialog组件；
2、通过点击事件出发emit事件；
3、通过为 this.$emit(‘update:dialogVisible’,false)，update是固定的，后面的是你需要改变的值，要和你props传过来的值保持一致；
4、修改后的值会更新到父组件；

// 子组件
<template>
  <div class="hello">
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleConfrim">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },

  },
  methods: {
    handleClose(done) {
      this.$emit('update:dialogVisible',false)
    },
     handleConfrim() {

       this.$emit('update:dialogVisible',false)

    },
    change(e) {
      this.$emit('input', e.data)


    }
  }
};
</script>

父组件代码部分
1、初始化一个默认的值，我这里初始化的值为isShow；
2、:dialogVisible.sync=“isShow” 向子组件传入dialogVisible，.sync修饰符一定要加上，这样子组的emit的update才会起作用；
3、然后就可以动态修改父组件的值了；

// 父组件
<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <el-button type="primary" @click="isShow = true">{{ '展示弹窗' }}</el-button>
    <HelloWorld :dialogVisible.sync="isShow"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      isShow: false
    }
  }
}
</script>