一、父组件向子组件传值

在父组件中的子组件标签上定义传值的属性名。然后在组件中通过props的方式接收。在props中也可以定义接收到的数据类型，如果不符合就会报错。

父组件
<template>
   <div> 
     <input type="text" v-model="name">
     <br>
     <br>
     <!-- 引入子组件 --> 
     <child :inputName="name"></child> //child子组件通过 :inputName="name" 将值传过去 
  </div>
</template> 
<script> 
import child from './child' 
export default { 
components: { child },
data () { 
    return { 
    name: '' 
    } 
} 
} 
</script>

<template>
   <div> 
     子组件: 
     <span>{{inputName}}</span> 
   </div> 
</template> 
<script> 
export default {
   props: { 
      inputName: String, 
      required: true 
   } 
}
</script>

二、子组件向父组件传值

子组件可以通过$emit触发父组件的自定义事件。this.$emit(event,arg) 用于触发当前实例上的事件。

<template>
    <div class="FGSHome">
    //父组件
        <v-fgsheader ref="header"></v-fgsheader>
        <button @click="getChildProp()">获取子组件的属性的值</button>
        <button @click="getChildMethod()">获取子组件的方法</button>
    </div>
</template>

<script>
import FGSHeader from './FGSHeader.vue'
    export default{

        data(){
            return { }
        },
        components:{
            'v-fgsheader':FGSHeader,
        },
        methods: {
          getChildProp(){
              alert(this.$refs.header.msg);
          },  
          getChildMethod(){
              this.$refs.header.run();
          }
        },
    }
</script>

<script>
  //子组件
    export default{
        data(){
            return {
                msg:"我是子组件header的值哟"
            }
        },
        methods:{
            run(){
                alert("这是子组件Header的方法+"+this.msg);
            }
        }
    }
</script>

三、 兄弟组件之间传值

这种方法需要调用外置的eventbus，调用其中$emit和$on方法来进行传值

<template>
  <div>
    A组件:
    <span>{{elementValue}}</span>
    <input type="button" value="点击触发" @click="elementByValue">
  </div>
</template>
<script>
  // 引入公共的bug，来做为中间传达的工具
  import Bus from './bus.js'
  export default {
    data () {
      return {
        elementValue: 4
      }
    },
    methods: {
      elementByValue: function () {
        Bus.$emit('val', this.elementValue)
      }
    }
  }
</script>

<template>
  <div>
    B组件:
    <input type="button" value="点击触发" @click="getData">
    <span>{{name}}</span>
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        name: 0
      }
    },
    mounted: function () {
      var vm = this
      // 用$on事件来接收参数
      Bus.$on('val', (data) => {
        console.log(data)
        vm.name = data
      })
    },
    methods: {
      getData: function () {
        this.name++
      }
    }
  }
</script>

四、 大量数据情况下的vuex

首先需要在src下新建一个vuex文件夹

然后在其中新建store.js文件

下载vuex插件

在store.js中这样设置

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

vuex中主要包括五大属性来处理各项数据。下一期详细讲解。

五、 路由传参

vue中的路由传参只要有两种方式，分为params和query，这两种方式多数是用来进行一些登录验证之类的问题。

params所携带传递的参数会显示在URl地址上，而query会，这是这两者最大的区域。