vue子组件和父组件之间传值方法

最新推荐文章于 2024-09-12 16:58:07 发布

昵称已存在lxttttt

最新推荐文章于 2024-09-12 16:58:07 发布

阅读量453

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43238931/article/details/119324099

版权

vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue中父子组件间的通信方式，包括使用prop进行数据传递，通过$ref调用子组件方法，以及利用$emit触发事件并传值给父组件。通过实例代码，帮助开发者理解并掌握这些关键交互机制。

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

父组件向子组件传值（prop-主要用于传递数据）

父组件向子组件传值分为两步：
1.父组件动态绑定一个需要传递的值
2.子组件在props属性中获取到父组件中传递的值，并使用

例子

父组件：
在父组件中动态绑定fatherMsg，并将msg1的值传递给fatherMsg

<template>
  <!-- 组件之间传值--父组件 -->
  <div class="father">
      <son :fatherMsg="msg1"></son>
  </div>
</template>

<script>
import Son from 'components/sendData/son.vue'
export default {
    name: 'Father',
    components: {
        Son
    },
    data() {
        return {
            msg1: '父组件向子组件传值~'
        }
    }
}
</script>

子组件：
子组件在props中获取到父组件传递过来的值，props需要以数组的形式书写，父组件传递过来的值子组件不可以更改

<template>
  <!-- 组件之间传值-子组件 -->
  <div class="son">
      {{fatherMsg}}
  </div>
</template>

<script>
export default {
    name: 'Son',
    props: ['fatherMsg']
}
</script>

父组件向子组件传值（$ref-主要用于传递方法函数）

当子组件定义了一个函数，而这个函数的参数需要从父组件中获取时可以使用这种传递方式
函数在子组件中定义，函数在父组件中调用

例子

子组件：
定义一个getSonMsg()的方法，此时需要传递一个来自父组件的参数msg

<template>
  <!-- 组件之间传值-子组件 -->
  <div class="son">
      {{refMsg}}
  </div>
</template>

<script>
export default {
    name: 'Son',
    data() {
        return {
            refMsg: ''
        }
    },
    methods: {
        getSonMsg(msg) {
            this.refMsg = msg;
        }
    }
}
</script>

父组件：
现在引用的子组件中定义子组件名称为son1，然后通过this.$refs.son1.getSonMsg(data);进行函数调用，data即为需要传递的参数

<template>
  <!-- 组件之间传值--父组件 -->
  <div class="father">
      <son ref="son1"></son>
  </div>
</template>

<script>
import Son from 'components/sendData/son.vue'
export default {
    name: 'Father',
    components: {
        Son
    },
    mounted() {
        this.$refs.son1.getSonMsg('ref传值~');
    }
}
</script>

子组件向父组件传值（$emit）

$emit通过事件触发，第一个参数时方法名，第二个参数是需要传递的参数

例子

子组件：
子组件中的button绑定以一个事件son1()，在绑定事件中使用$emit()，将函数sonToFather1()这个函数传递给父组件，同时传递过去一个参数emitMsg

<template>
  <!-- 组件之间传值-子组件 -->
  <div class="son">
      <!-- 事件触发$emit，使子组件向父组件传值 -->
      <el-button @click="son1">点击传值</el-button>
  </div>
</template>

<script>
export default {
    name: 'Son',
    data() {
		emitMsg: '这是子组件传递给父组件的第一个方法sonToFather1'
	},
    methods: {
        son1() {
            // 第一个参数是传递给父组件的方法名，第二个参数是传递给父组件的数据
            this.$emit('sonToFather1', emitMsg);
        }
    }
}
</script>

父组件：
父组件在调用的子组件中触发sonToFather1事件，并且定义触发事件的执行函数为hello1()

<template>
  <!-- 组件之间传值--父组件 -->
  <div class="father">
      <son @sonToFather1="hello1"></son>
      <div>{{msg2}}</div>
  </div>
</template>

<script>
import Son from 'components/sendData/son.vue'
export default {
    name: 'Father',
    components: {
        Son
    },
    data() {
        return {
            msg2: ''
        }
    },
    methods: {
        hello1(data) {
            this.msg2 = data;
        }
    }
}
</script>