vue2.x组件间传值及在vue子组件中操作父组件数据时生命周期的问题

jcat_李小黑

于 2019-07-26 16:07:01 发布

阅读量2.2k

点赞数 2

分类专栏： Vue 文章标签： vue 前端生命周期 vuex

本文链接：https://blog.csdn.net/weixin_43216105/article/details/97375051

版权

本文详细介绍了Vue2.x中组件间的通信方式，包括props、$emit、v-on以及使用事件总线和Vuex。特别强调了在子组件中操作父组件数据时的生命周期问题，如需在mounted后通过watch监听并处理复杂数据。同时提供了兄弟组件间通信的三种解决方案，并给出了相关参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在做项目中遇见一个bug， vue在子组件内部操作父组件数据时，在生命周期mounted和created中给页面渲染父组件的值页面渲染是正常的，但是控制台会报错找不到值！ 此文记录下vue组件之间如何传值取值，和bug的解决方法。

正文

父组件给子组件传值—props 实现父组件向子组件传值。

父组件内：msg是绑定的自定义属性，类似我们原生html 给标签自定义属性一样

<child-pack  :msg ="myMsg" @listenTochildEvent="changeFromChild"></child-pack>

<script >
import childpack from './childPack.vue' //引用子组件
export default{
   
  name: 'FatherPack',
  components: {
    childpack },
  data(){
   
      return（）{
   
           myMsg：‘我是父组件参数’,
           fartherMsg：{
   
           	testMsg:{
   
				code:01,
				name:'test'
				}
			}
       }
  },
  mothods:{
   
  	changeFromChild（item,）{
   
   		//一些操作
	}
  }

}
</script>

子组件传值到父组件 – this.$emit()

在子组件中：

export default{
   
    methods: {
   
          changeFather(){
   
             this.$emit("listenTochildEvent","我是子组件的参数");
          },
        //可以传递参数，参数可以是值、对象、数组等类型。
        //  changeFather(pms){ 
        //    this.$emit("listenTochildEvent",pms);
       //   },

最低0.47元/天解锁文章