vue组件传值的详细使用教程（父到子，子到父，兄弟间，祖孙间, 全局数据管理）

父到子：

• father.vue中：

<router-view :data="d" msg="hello"></router-view>

data() {
    return {
      d: "发送给兄弟的数据"
    };
  },

• son.vue中：（在export defaullt内部添加属性props）

props: ["data","msg"]

然后就可以在子组件中直接使用{{data}}

<h1>{{ data }} {{msg}}</h1>

 

子到父：

• son.vue中：

data() {
    return {
      msg: "传给父组件"
    };
  },
mounted() {
    this.$emit("toparent", this.msg); //传递数据给父组件
  }

• father.vue中：

<router-view @toparent="get"/>

data() {
    return {
      msg: "原来的数据"
    };
  },
methods: {
    get(a) {
      this.msg = a;
    }
  },

 

兄弟组件传值：

• 在main.js中，new一个空的vue挂在到vue原型上(需要在创建Vue实例之前挂载)：

Vue.prototype.$bus = new Vue();

• 在demo.vue中使用bus发送数据（可以通过点击事件触发）

this.$bus.$emit("sendData",{data:"需要发送的数据"})

• 在另一个test.vue中接收数据（可以写在created生命周期函数中）

this.$bus.$on("sendData",d=>{console.log(d)})

 

祖孙组件传值：可以跨多级组件传递数据

• grandparent.vue中：

export default {
        name: "home",
	provide(){
		return {
			msg:"来自祖先的数据",
            fn(){console.log("祖先的方法")}
		}
	},
}

• son.vue中：

<div>{{msg}}</div>


export default {
        name: "detail",
	inject:["msg","fn"]
}

注意:provide提供的值不能修改,只能访问!!!但是可以通过provide中的方法去改变data属性中的值,可以看这个小应用:传送门

 

其他传值方式：

1. 子获取父的值：直接在子组件中this.$parent.msg即可获取到父组件的值,可以修改,但是不推荐这种方式修改

2. 父获取子的值：在father.vue中,也可以修改子组件的数据,但不推荐

<router-view ref="child"/>

mounted() {
    console.log(this.$refs.child.msg); //主动获取子组件的数据
  }

3.main.js中的根构造函数中的data可以作为全局数据管理,可以对数据进行操作,this.$root.XXX访问即可,$root也能访问到method里面的方法.小型项目可以使用该方式,大项目推荐使用vuex

//main.js
new Vue({
  data: {
    gdata: 6
  },
  methods: {
    setData() {
      console.log("testFn");
    }
  },
  router,
  store,
  render: h => h(App)
}).$mount("#app");

//test.vue
mounted() {
    this.$root.gdata += 1;
    this.$root.setData();
    console.log(this.$root.gdata);
  }

4. 使用vuex传值：传送门

5. 另外也可以使用localStorage，sessionStorage, cookie传递数据