vue组件传值（父子组件传值、子父组件传值、非父子组件传值）

1. 父子组件传值

主要是通过自定属性方式实现数据传递

实现步骤：

1、在子组件的调用标签上添加自定义属性, 将需要传递给子组件的数据作为自定义属性的值

ParentComponent.vue

<template>
  <div class="parent">
    <h1>{{title}}</h1>
    <!-- 调用 -->
    <ChildComponent :msgFromParent="msgFromParent" :list="list"/>
  </div>
</template>

<script>
// 导入组件
import ChildComponent from "@/pages/parent2child/ChildComponent";
export default {
  // 注册
  components: {
    ChildComponent
  },
  data() {
    return {
      title: "父组件",
      msgFromParent:'来父组件的数据',
      list:[
          '苹果','香蕉','草莓'
      ]
    };
  }
};
</script>

2、在子组件配置对象中, 通过props属性节点来接收父组件通过自定义属性传递的数据

ChildComponent.vue

<template>
  <div class="child">
      <h1>{{title}}</h1>
      <h3>{{msgFromParent}}</h3>
      <ul>
          <li v-for="item in list" :key="item">{{item}}</li>
      </ul>
      <button @click="updateProps">update props</button>
  </div>
</template>

<script>
export default {
    // 接收父组件通过自定义属性传递的数据: 使用子组件调用标签上的自定义属性名作为数组元素
    // props:['msgFromParent','list'],
    // 使用子组件调用标签上的自定义属性名作为对象的属性名, 通过对象的方式可以对父组件传递过来的数据类型进行校验
    // 数据类型可选值: Number, String, Boolean, Array, Object
    // props:{    
    //    msgFromParent:String,
    //    list:Array 
    // },
    props:{    
       msgFromParent:{
           type:String,
           // 指定默认值
           default:'默认值'
       },
       list:Array 
    },
    data(){
        return {
            title:'子组件'
        }
    },
    methods:{
        updateProps(){
            // this.list[0]='hello';
        }
    }
}
</script>

2、子父组件传值

实现步骤：

1. 在子组件的内部通过this.$emit('自定义事件名称','数据') 方法触发自定义事件

ChildComponent.vue

<template>
  <div class="child">
      <h1>{{title}}</h1>
      <button @click="sendData">发送数据</button>
  </div>
</template>

<script>
export default {
    data(){
        return {
            title:'子组件',
            msgFromChild:'来自子组件的数据'
        }
    },
    methods:{
        sendData(){
            // 通过this.$emit()触发自定义事件
            this.$emit('message',this.msgFromChild);
        }
    }
}
</script>

2、在父组件中监听自定义事件, 通过自定义事件处理函数的形参接收数据即可

ParentComponent.vue

<template>
  <div class="parent">
    <h1>{{title}}</h1>
    <h3>{{msgFromChild}}</h3>
    <!-- 调用 -->
    <ChildComponent @message="receiveData"/>
  </div>
</template>
<script>
// 导入组件
import ChildComponent from "./ChildComponent";
export default {
  // 注册
  components: {
    ChildComponent
  },
  data() {
    return {
      title: "父组件",
      // 接收子组件传递过来的数据
      msgFromChild:''
    };
  },
  methods:{
    // 自定义事件message的处理函数, data是系统参数, 保存的是子组件通过this.$emit()方法的数据
    receiveData(data){
      // console.log(data);
      this.msgFromChild=data;
    }
  }
};
</script>

3、非父子组件传值

实现步骤：

主要还是通过自定义事件方式来实现

1. 创建一个空的vue实例vm充当事件中心

utils/vm.js

// 导入vue
import Vue from 'vue';
// 创建vue空实例对象
const vm=new Vue();
// 导出vue实例对象
export default vm;

1. 在数据发送组件中通过事件中心vm.$emit('自定义事件名称','数据')触发自定义事件

ChildComponent.vue

<template>
  <div class="child">
      <h1>{{title}}</h1>
      <button @click="sendData">发送数据</button>
  </div>
</template>
<script>
// 导入vm
import vm from '../../utils/vm';
export default {
    data(){
        return {
            title:'子组件',
            msgFromChild:'来自组件ChildComponent的数据'
        }
    },
    methods:{
        sendData(){
            vm.$emit('message',this.msgFromChild);
        }
    }
}
</script>

1. 在数据接收组件中, 通过事件中心vm.$on('自定义事件名称',function(data){})监听自定义事件, 然后通过自定义事件处理函数的形参接收数据即可

Child1Component.vue

<template>
  <div class="child1">
      <h1>{{title}}</h1>
      <h3>{{msgFromChild}}</h3>
  </div>
</template>
<script>
// 导入vm
import vm from '@/utils/vm';
export default {
    mounted(){
        // 监听自定义事件
        // data: 系统参数, 保存的是vm.$emit()方法发送的数据
        vm.$on('message',data=>{
            this.msgFromChild=data;
        }); 
    },
    data(){
        return {
            title:'子组件1',
            // 接收兄弟组件发送过来的数据
            msgFromChild:''
        }
    }
}
</script>