[vue] 组件之间数据传递方法

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。
组件系统 可以让我们用独立可复用的 小组件 来构建大型应用。

由于vue组件作用域的关系，组件是独立的存在。因此需要使用特定的方法才能实现组件之间的数据传递。

一、父组件向子组件传递数据

推荐三种方法：
第一种：父组件绑定需要传递的事件。通过 props 向下传递数据给子组件。prop 是单向绑定的，只能父组件向子组件传递数据。这是为了防止子组件无意修改了父组件的状态。

/*父组件部分*/
<router-view :fnParentEvent='fnParentEvent' />
   
<script>
  export default {
    methods: {
      fnParentEvent(){
        console.log("我是父组件事件");
      }
    }
  }
</script>

/*子组件部分*/
<template>
  <div>
      <button type="button" @click="getParentEvent()">获取父组件事件</button>
  </div>
</template>

<script>
  export default {
    props:['fnParentEvent'],
    methods: {
      getParentEvent(){
        this.fnParentEvent();
      },
    }
  }
</script>

第二种：父组件监听需要传递的事件。子组件使用 $emit 触发父组件的事件

/*父组件部分*/
 <router-view @fnParentEvent="fnParentEvent" />
 
 <script>
  export default {
    methods: {
      fnParentEvent(){
        console.log("我是父组件事件");
      }
    }
  }
</script>

/*子组件部分*/
<template>
  <div>
      <button type="button" @click="getParentEvent()">获取父组件事件</button>
  </div>
</template>

<script>
  export default {
    name: "tab,
    methods: {
      getParentEvent(){
        this.$emit('fnParentEvent', this.fnParentEvent); 
      },
    }
  }
</script>

第三种：子组件中可使用 this.$parent 访问父组件中事件。

 this.$parent.fnParentEvent(); //此方法可用来应急，不推荐使用。建议使用前两种实现父子组件通信

二、子组件向父组件传递数据

推荐两种方法：
第一种：父组件中监听子组件使用 $emit 触发的事件。

/*子组件部分*/
this.$emit("transferInfo",this.text);

/*父组件部分*/
<router-view  @transferInfo ="getInfo" />

//script
getInfo(msg){
	console.log("msg:",msg); //从msg中获取到this.text数据
 }

第二种：父组件可以通过 ref 特性为子组件赋予一个 ID 引用。用 this.$refs 方法获取子组件中事件。

注： ref 只会在组件渲染完成之后生效，并且它们不是响应式的。---- 避免在模板或计算属性中访问 $refs。

/*子组件部分*/
<script>
  export default {
    methods: {
      fnTab2Event(){
        console.log("我是子组件事件");
      },	
    }
  }
</script>

/*父组件部分*/
 <router-view ref="child"/>
 
 //script
 this.$refs.child.fnTab2Event()