vue 父子传值的两种方法

最新推荐文章于 2023-10-23 16:44:23 发布

春日迟迟~

最新推荐文章于 2023-10-23 16:44:23 发布

阅读量171

点赞数

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

本文链接：https://blog.csdn.net/weixin_45689786/article/details/125886625

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue中父子组件间通信的两种常见方法：使用props从父组件传递数据到子组件，以及通过v-model实现双向数据绑定。示例代码展示了如何在父组件中控制子组件的显示隐藏，并在子组件中触发父组件的方法来关闭对话框。

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

vue父子传值的两种方法

传统父向子传props 子传父$emit

父组件

<template>
    <div>
     <ewm-img :value="dialogShow" :imageUrl="imageUrl" @input="closeEemDialog"/> 
    </div>
</template>

<script>
//引入组件
import EwmImg from "./components/ewmDialog.vue";
export default {
  components: { EwmImg },
    data() {
        return {
           dialogShow:false //控制组件显示隐藏
        };
    },
    created() {

    },
    mounted() {

    },
    methods: {
    //组件关闭方法
      closeEemDialog(){
     this.dialogShow = false
    },
    }
};
</script>

<style scoped lang="less">

</style>

子组件

<template>
  <div>
    <el-dialog
      title="二维码"
      :visible.sync="value"
      width="30%"
      :before-close="closeEemDialog"
    >
      <img :src="imageUrl" alt="" class="popImg" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeEemDialog">取 消</el-button>
        <el-button type="primary" @click="closeEemDialog"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ewmDialog",
  props: {
    imageUrl: {
      type: String,
      default: false,
    },
     value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
    //   dialogVisible: true,
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 传统父传子
    closeEemDialog(){  //触发父组件的input方法关闭dialog
       this.$emit("input");
     },
  },
};
</script>

<style scoped lang="scss">
.popImg {
  width: 410px;
  height: 410px;
  display: block;
  margin: auto;
}
</style>

v-model方式

在这里插入图片描述

父组件

<template>
    <div>
 		<ewm-img v-model="dialogShow" :imageUrl="imageUrl" />    
 </div>
</template>

<script>
//引入组件
import EwmImg from "./components/ewmDialog.vue";
export default {
  components: { EwmImg },
    data() {
        return {
           dialogShow:false //控制组件显示隐藏
        };
    },
    created() {

    },
    mounted() {

    },
    methods: {
    }
};
</script>

<style scoped lang="less">

</style>

子组件

<template>
  <div>
    <el-dialog
      title="二维码"
      :visible.sync="value"
      width="30%"
      :before-close="closeEemDialog"
    >
      <img :src="imageUrl" alt="" class="popImg" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeEemDialog">取 消</el-button>
        <el-button type="primary" @click="closeEemDialog"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ewmDialog",
  props: {
    imageUrl: {
      type: String,
      default: false,
    },
     value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
    //   dialogVisible: true,
    };
  },
  created() {},
  mounted() {},
  methods: {
    closeEemDialog(){
        this.$emit("input", false);
    },
  },
};
</script>

<style scoped lang="scss">
.popImg {
  width: 410px;
  height: 410px;
  display: block;
  margin: auto;
}
</style>