vue组件间传值

1、父子组件传值

（1）父给子
父组件：

<child :msg="msg"></child>

js:
data() {
    return {
      msg: "helloWorld"
    };
  },

子组件：

<script>
export default {
  props: ["msg"]
};
</script>

（2）子组件：

this.$emit("showMsg", "中国国际进口博览会");

父组件：

<child @showMsg="showMsg"></child>

js:
methods: {
    showMsg(data) {
    //data即子组件传的值
      this.childMsg = data;
    }
  }

2、兄弟组件传值(bus传值)

（1）在assets文件夹下建立一js个文件

import Vue from "vue";


export default new Vue();

在mian.js下引入并注册

import bus from "./assets/bus"

Vue.$bus = bus;

//或者直接 在 main.js（不需要新建js文件）
Vue.prototype.$eventBus=new Vue()

（2）传递者：

this.$bus.$emit("showdata","helloworld!");

（3）接收者

this.$bus.$on("showdata",data=>{
	//data即为传递的数据:helloworld!
});

bus传值的坑： https://blog.csdn.net/zqyzqy22/article/details/89385287.

2、路由传参

params传参
（1）（页面刷新数据会丢失）:

this.$router.push({
        name: `/index`,
        params: {
          page: '1',
          code: '8989'
        }
})

//页面获取
this.$route.query.page

（2）

// 路由定义
{
  path: '/describe/:id',
  name: 'Describe',
  component: Describe
}
// 页面传参
this.$router.push({
  path: `/describe/${id}`,
})
// 页面获取
this.$route.params.id

query传参：

this.$router.push({
        path: `/home`,
        query: {
          page: '1', 
          code: '8989'
        }
})

//页面获取
this.$route.params.page

3、vuex传值:集中式的数据状态管理器

引用别人的链接：https://blog.csdn.net/hoanFir/article/details/85298212

4、provide / inject

和父子传递相似，provider/inject简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。

要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

看一下下边的例子

父组件：

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
import child from "./child";
export default {
  provide() {
    return {
      for: "12345，上山打老虎"
    };
  },
  components: {
    child
  },
 
};
</script>

子组件：

<template>
  <div>
    <p>子组件：{{data}}</p>
    <son></son>
  </div>
</template>
<script>
import son from "./son";
export default {
  inject: ["for"],
  data() {
    return {
      data: this.for
    };
  },
  components: {
    son
  },
 
};
</script>
<style>
</style>

孙组件：

<template>
  <div>
    <p>孙组件：{{data2}}</p>
  </div>
</template>
<script>
export default {
  inject: ["for"],
  data() {
    return {
      data2: this.for
    };
  }
};
</script>

结果：

5、attrs

如果父传子有很多值,那么在子组件需要定义多个props解决:attrs获取子传父中未在 props 定义的值

// 父组件
<home title="这是标题" width="80" height="80" imgUrl="imgUrl"/>

// 子组件
mounted() {
  console.log(this.$attrs) //{title: "这是标题", width: "80", height: "80", imgUrl: "imgUrl"}
},

果子组件定义了 props,打印的值就是剔除定义的属性:

props: {
  width: {
    type: String,
    default: ''
  }
},
mounted() {
  console.log(this.$attrs) //{title: "这是标题", height: "80", imgUrl: "imgUrl"}
},

6、listeners

场景:子组件需要调用父组件的方法

// 父组件
<home @change="change"/>

// 子组件
mounted() {
  //调用
  this.$listeners.change();
  console.log(this.$listeners) //即可拿到 change 事件
}

7、parent和children

children和parent 并不保证顺序，也不是响应式的 只能拿到一级父组件和子组件

//父组件
mounted(){
  console.log(this.$children) 
  //可以拿到 一级子组件的属性和方法
  //所以就可以直接改变 data,或者调用 methods 方法
}

//子组件
mounted(){
  console.log(this.$parent) //可以拿到 parent 的属性和方法
}

8、$refs

// 父组件
<home ref="home"/>

mounted(){
  console.log(this.$refs.home) //即可拿到子组件的实例,就可以直接操作 data 和 methods
}

(ref挂在dom元素上可获取当前元素)

9、$refs