vue.js基础中父子组件之间的传值

组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：

父子关系，兄弟关系，隔代关系（可能隔多代）。

这里我们将父子关系的传值

针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了 vue 父子组件间通信的几种方式，如 props、$emit/$on、vuex、$parent / $children、以通俗易懂的实例讲述这其中的差别及使用场景，希望对小伙伴有些许帮助。

方法一、props/$emit

父组件 A 通过 props 的方式向子组件 B 传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。

1.父组件向子组件传值

接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件 Users.vue 中如何获取父组件 App.vue 中的数据 users:[“Henry”,“Bucky”,“Emily”]

//App.vue父组件

 <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名

总结：父组件通过 props 向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed

2.子组件向父组件传值（通过事件形式）

接下来我们通过一个例子，说明子组件如何向父组件传递值：当我们点击 “Vue.js Demo” 后，子组件向父组件传递值，文字由原来的“传递的是一个值”变成“子向父组件传值”，实现子组件向父组件值的传递。

 // 子组件

 <template>

   <header>

     <h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件

   </header>

 </template>

 <script>

 export default {

   name: 'app-header',

   data() {

     return {

       title:"Vue.js Demo"

     }

   },

   methods:{

     changeTitle() {

       this.$emit("titleChanged","子向父组件传值");//自定义事件 传递值“子向父组件传值”

     }

   }

 }

 </script>

// 父组件

 <template>

   <div id="app">

   //与子组件titleChanged自定义事件保持一致

     <app-header v-on:titleChanged="updateTitle" ></app-header>

  // updateTitle($event)接受传递过来的文字

     <h2>{{title}}</h2>

   </div>

 </template>

 <script>

 import Header from "./components/Header"

 export default {

   name: 'App',

   data(){

     return{

       title:"传递的是一个值"

     }

   },

   methods:{

     updateTitle(e){ //声明这个函数

       this.title = e;

     }

   },

   components:{

    "app-header":Header,

   }

 }

 </script>

总结：子组件通过 events 给父组件发送消息，实际上就是子组件把自己的数据发送到父组件。

方法二、$ emit/$on

这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。

当我们的项目比较大时，可以选择更好的状态管理解决方案 vuex。

1. 具体实现方式：

var Event=new Vue();

Event.$emit(事件名,数据);

Event.$on(事件名,data => {});

2. 举个例子

假设兄弟组件有三个，分别是 A、B、C 组件，C 组件如何获取 A 或者 B 组件的数据。

<div id="itany">

     <my-a></my-a>

     <my-b></my-b>

     <my-c></my-c>

 </div>

<template id="a">

   <div>

     <h3>A组件：{{name}}</h3>

     <button @click="send">将数据发送给C组件</button>

   </div>

 </template>

 <template id="b">

   <div>

     <h3>B组件：{{age}}</h3>

     <button @click="send">将数组发送给C组件</button>

   </div>

 </template>

 <template id="c">

   <div>

     <h3>C组件：{{name}}，{{age}}</h3>

   </div>

 </template>

 <script>

 var Event = new Vue();//定义一个空的Vue实例

 var A = {

     template: '#a',

     data() {

       return {

         name: 'tom'

       }

     },

     methods: {

       send() {

         Event.$emit('data-a', this.name);

       }

     }

 }

 var B = {

     template: '#b',

     data() {

       return {

         age: 20

       }

     },

     methods: {

       send() {

         Event.$emit('data-b', this.age);

       }

     }

 }

 var C = {

     template: '#c',

     data() {

       return {

         name: '',

         age: ""

       }

     },

     mounted() {//在模板编译完成后执行

      Event.$on('data-a',name => {

          this.name = name;//箭头函数内部不会产生新的this，这边如果不用=>,this指代Event

      })

      Event.$on('data-b',age => {

          this.age = age;

      })

     }

 }

 var vm = new Vue({

     el: '#itany',

     components: {

       'my-a': A,

       'my-b': B,

       'my-c': C

     }

 });    

 </script>

$on 监听了自定义事件 data-a 和 data-b，因为有时不确定何时会触发事件，一般会在 mounted 或 created 钩子中来监听。