Vue子父组件间的数据传递

Vue组件间的作用域是独立的，不能相互之间调用数据，需要通过特定的方法进行数据的传递。

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

1、使用 Prop 传递数据

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的 props 选项。
注意：子组件标签中的属性不区分大小写，要通过中线的方式区分单词。props的值可以使数组，可以使对象。

父组件：

<template>  <div id="app">    <child-a :msg="text" number-to="3333"></child-a>  </div></template><script>  import ChildA from './components/child.vue'  export default {    data() {      return {        text: '我是父组件的数据'      }    },    components: {      ChildA    }  }</script>

子组件：

<template>  <h1>{{msg}}++++{{numberTo}}</h1></template><script>export default {    props: ['msg', 'number-to'],  }</script>

2、使用slot分发内容

插槽功能，传递的是模板

1.单个slot：

除非子组件模板包含至少一个 插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身。
最初在 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

假定 my-component 组件有下面模板：

<div>  <h2>我是子组件的标题</h2>  <slot>    只有在没有要分发的内容时才会显示。  </slot></div>

父组件模版：

<div>  <h1>我是父组件的标题</h1>  <my-component>    <p>这是一些初始内容</p>    <p>这是更多的初始内容</p>    <!--这里的内容会插入到my-component组件下的slot标签中-->  </my-component></div>

渲染结果：

<div>  <h1>我是父组件的标题</h1>  <div>    <h2>我是子组件的标题</h2>    <p>这是一些初始内容</p>    <p>这是更多的初始内容</p>  </div></div>

2.具名slot：

元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。
仍然可以有一个匿名 slot，它是默认 slot，作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot，这些找不到匹配的内容片段将被抛弃。

例如，假定我们有一个 app-layout 组件，它的模板为：

<div class="container">  <header>    <slot name="header"></slot>  </header>  <main>    <slot></slot>  </main>  <footer>    <slot name="footer"></slot>  </footer></div>

父组件模版：

<app-layout>  <h1 slot="header">这里可能是一个页面标题</h1>  <p>主要内容的一个段落。</p>  <p>另一个主要段落。</p>  <p slot="footer">这里有一些联系信息</p></app-layout>

渲染结果为：

<div class="container">  <header>    <h1>这里可能是一个页面标题</h1>  </header>  <main>    <p>主要内容的一个段落。</p>    <p>另一个主要段落。</p>  </main>  <footer>    <p>这里有一些联系信息</p>  </footer></div>

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

1、$emit

子组件主要通过事件传递数据给父组件
注意：子组件标签中的时间也不区分大小写要用“-”隔开
子组件：

<template>  <button @click="emitEvent">点击我</button></template><script>  export default {    data() {      return {        msg: "我是子组件中的数据"      }    },    methods: {      emitEvent(){        this.$emit('my-event', this.msg)        //通过按钮的点击事件触发方法，然后用$emit触发一个my-event的自定义方法，传递this.msg数据。      }    }  }</script>

父组件：

<template>  <div id="app">    <child-a @my-event="getMyEvent"></child-a>    <!--父组件中通过监测my-event事件执行一个方法，然后取到子组件中传递过来的值-->  </div></template><script>  import ChildA from './components/child.vue'  export default {    components: {      ChildA    },    methods: {      getMyEvent(msg){          console.log('接收的数据--------->'+msg)//接收的数据--------->我是子组件中的数据      }    }  }</script>

三、Vuex进行参数传递

为了便于开发，Vue 推出了一个状态管理工具 Vuex，可以很方便实现组件之间的参数传递

详细信息请查看官网：https://cn.vuejs.org/v2/guide/components.html