父子组件和非父子组件之间的传值

1、父子组件之间的传值

1.1、父组件给子组件传值（data,methods,以及整个组件）

早些时候，我们提到了创建一个博文组件的事情。问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的。这也正是 prop 的由来。

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：

实现方法：

父组件为Header.vue，子组件为Child.vue

①父组件调用子组件的时候 绑定动态属性

<v-header :title="title" :run="run()"></v-header>

②在子组件里面通过props接受父组件传过来的数据

props: ['title','run()']或者
props:{
'title':String//对传过来的数据进行验证
}

③直接在子组件使用

1.2、父组件主动获取子组件的值（不通过props）(this.$refs.)

①调用子组件的时候定义一个ref

<v-child ref="child"></v-child>

②在父组件里面通过

this.$refs.header.属性
this.$refs.header.方法 获取数据和方法

1.3、子组件主动获取父组件的数据和方法(this.$parent)

//子组件中如何获取父组件的数据和方法
this,$parent.属性
this,$parent.方法

2、非父子组件之间的传值

传值的两个组件名称分别为Header.vue 和Footer.vue

要达到的效果是：在Header页面设置一个按钮，点击之后会将Header页面的数据传到Footer页面中。也就是在Header页面广播数据，在Footer页面接收数据

附图

基础知识：

1.$emit  触发当前实例上的事件，附加参数都会传给监听器回调。

2.$on  监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

实行步骤：

①我们需要新建一个js文件，用来创建一个Vue实例并暴露出去，创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件

②在Header页面引入这个vueEvent

写上data数据，方法和点击事件

<template>
  <div id="Header">
    <el-button @click="getFooter()">获取footer组件的msg</el-button>
  </div>
</template>

<script>
import Child from './Child'
import vueEvent from '../model/vueEvent'

export default {
  data() {
    return {
      title: "nihao"
    }
  },
  methods: {
    getFooter() {
      vueEvent.$emit('to-news', this.title)//广播数据，
    }

  },

  components: {
    'v-child': Child
  }
}
</script>

<style>
</style>

③在Footer页面也引入vueEvent实例，接收数据，

<template>
  <div>
    <h3>footer页面</h3>
    <p>这里是从header页面传过来的数据----------{{msg}}</p>
  </div>
</template>
<script>
import vueEvent from '../model/vueEvent'
export default {
  data() {
    return {
      msg: ""
    }
  },
  mounted() {
    vueEvent.$on('to-news', (data) => {
      this.msg = data;//将从Header页面获取到的数据传给msg
      console.log(this.msg);

    })
  }
}
</script>