vue组件间的传值-15种传值方法

1、父组件传给子组件

父组件绑定自定义属性，子组件使用 props 接收

2、子组件传给父组件

子组件通过$emit方法，把数据传递给父组件；父组件绑定一个自定义事件监听

3、兄弟组件间传值

定义一个公共的事件总线Bus，通过它作为中间桥梁；在使用的页面引入Bus.js文件

BUS.$emit 发送消息；在mounted周期里通过Bus.$on 监听消息

Bus.js

import Vue from 'vue'
export default new Vue()

4、路由间传值

4 方法一：使用问号传值

A页面跳转B页面时使用 this.$router.push(‘/B?name=danseek’)

B页面可以使用 this.$route.query.name 来获取A页面传过来的值

5 方法二：query 传值

在页面跳转的时候，使用 this.$router.oush()对象的方法属性 query 传值

this.$router.push({
     path:'/b',
     query: {
          id: 66,
          name: 'qll'
    }
})

 在B组件的时候，通过 this.$route.query.id 的方式获取

注：这种方法刷新页面数据不会消失，并且可以在地址栏看到  localhost:8080/b?id=66&name=qll

 6 方法三：params 传值

 和query方法相似，传值的时候把query改为params，接收的时候使用 this.$route.params.id

注：区别于query，params传值不会再地址栏中显示，刷新页面消失   localhost:8080/b

7 方法四：路由拼接，使用冒号传值

配置路由的时候，path使用：name值 的方式配置；可以多个数据

{
    path: '/b/:name/:id',
    name: 'b',
    component: () => import( '../views/B.vue')
  },

使用的时候

 this.$router.push({
      path:'b/qll/66'
  })

页面可以通过 this.$route.params.name 来获取路由传入的name的值或ID值。

注：这种方法刷新页面数据不会消失，并且传递的数据也是可以在地址栏看到的 

地址栏：localhost:8080/b/qll/66

8 、使用router-view组件传值

router-view绑定要传的属性，在对应的子页面里加上props，因为更新后没有刷新路由，不能直接在子页面的Mounted钩子里直接获取最新的值，而要使用 watch

<router-view :type="type"></router-view>

// 子页面
......
props: ['type']
......
watch: {
            type(){
                // console.log("在这个方法可以时刻获取最新的数据:type=",this.type)
            },
        },

9、祖传孙 $attrs 中间属性

在父组件里绑定属性v-bind="$attrs"，代表祖父组件传给父组件的值直接传给子组件（如果父组件使用 props 接收了祖父传来的某个值，这个值就不传给子组件了），子组件使用 props 接收到父组件不要的其余的值。代码同10

10、孙传祖 $listeners 中间事件

借助$listeners中间事件。和$attrs相似，在父组件绑定事件 v-on="$listeners"，子组件使用 this.$emit 触发，祖父组件绑定自定义方法来监听

//GrandParent.vue

<template>
    <section>
        <parent name="grandParent" sex="男" age="88" hobby="code" @sayKnow="sayKnow"></parent>
    </section>
</template>

<script>
    import Parent from './Parent'
    export default {
        name: "GrandParent",
        components: {
          Parent
        },
        data() {
            return {}
        },
        methods: {
          sayKnow(val){
            console.log(val)
          }
        },
        mounted() {
        }
    }
</script>


//Parent.vue

<template>
  <section>
    <p>父组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <children v-bind="$attrs" v-on="$listeners"></children>
  </section>
</template>

<script>
  import Children from './Children'

  export default {
    name: "Parent",
    components: {
      Children
    },
    // 父组件接收了name,所以name值是不会传到子组件的
    props:['name'],
    data() {
      return {}
    },
    methods: {},
    mounted() {
    }
  }
</script>


//Children.vue

<template>
  <section>
    <p>子组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <p>祖父的性别：{{sex}}</p>
    <p>祖父的年龄：{{age}}</p>
    <p>祖父的爱好：{{hobby}}</p>

    <button @click="sayKnow">我知道啦</button>
  </section>
</template>

<script>
  export default {
    name: "Children",
    components: {},
    // 由于父组件已经接收了name属性，所以name不会传到子组件了
    props:['sex','age','hobby','name'],
    data() {
      return {}
    },
    methods: {
      sayKnow(){
        this.$emit('sayKnow','我知道啦')
      }
    },
    mounted() {
    }
  }
</script>

11、使用依赖注入传给后代子孙曾孙 provide  inject

父组件使用 provide 提供给后代组件的数据和方法；在任何一个后代组件里，都可以使用 inject 来给当前实例注入父组件提供的方法或数据

12、使用$ref传值

给子组件设置一个 ref=childer，父组件通过 this.$refs.childer.** 来访问子组件的方法和属性

13、$parent

通过parent 可以获父组件实例，然后通过这个实例就可以访问父组件的属性和方法，

它还有一个兄弟root，可以获取根组件实例

子组件使用 this.$parent.** 传值给父组件

14、sessionStorage传值

sessionStorage 是浏览器的全局对象，存在它里面的数据会在页面关闭时清除 。运用这个特性，我们可以在所有页面共享一份数据。

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

注意：里面存的是键值对，只能是字符串类型，如果要存对象的话，需要使用 let objStr = JSON.stringify(obj) 转成字符串然后再存储（使用的时候 let obj = JSON.parse(objStr) 解析为对象）

15、vuex

基于store 的状态管理共享状态