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传递数据

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值