Vue组件传值--父子组件中的传值--兄弟组件中的传值(个人总结)

父子组件中的传值

1.方法一（官网标准）

父向子    v-bind props

<!-- 父组件使用v-bind传值 -->
     <router :msg="msg"></router>

<!-- 子组件使用props接收值 -->
     <p>子组件 ----- {{msg}}</p> 

     props: ["msg"], //props接收

 

props:验证

 

props: {
    // fooA只接受数值类型的参数
    fooA: Number,
    // fooB可以接受字符串和数值类型的参数
    fooB: [String, Number],
    // fooC可以接受字符串类型的参数，并且这个参数必须传入
    msg: {
      type: String,
      required: true
    },
    // fooD接受数值类型的参数，如果不传入的话默认就是100
    fooD: {
      type: Number,
      default: 100
    },
    // fooE接受对象类型的参数
    fooE: {
      type: Object,
      // 当为对象类型设置默认值时必须使用函数返回
      default: function() {
        return { message: "Hello, world" };
      }
    },
    // fooF使用一个自定义的验证器
    fooF: {
      validator: function(value) {
        return value >= 0 && value <= 100;
      }
    },

　　fooG: {
      type:Array,
      // 当为数组类型设置默认值时必须使用数组返回
      default: function() {
        return [];
      }
    },

}
转载地址来源：https://www.cnblogs.com/chen-yi-yi/p/11152391.html  （ 啾啾啾啾一口 ）

 

 props 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件修改父组件的状态。所以不应该在子组件中修改 props 中的值。

子向父  v-on $emit

 

子组件:
<button @click="returnValue">按钮</button>
　　methods: {
    　　returnValue() {
      　　this.$emit("zifu", "子组件向父组件传值", true);
    　　}
  　　}

父组件:
<router  v-on:zifu="hehe"></router>
　　methods: {
   　　hehe: function(data, data2) {
     　　console.log(data, data2);
   　　}
　　}

 

2.方法二（父 =>子  包含关系）

 

父向子 

<!-- 父组件使用在data中初始化 -->
data(){
    return {
      status: false
    }
  }

<!-- 子组件使用props接收值 -->

created: {     // 此处created是参考示例，也可以在mounted或其他能够获取this的任意一个周期
     let aa = this.$parent.status
}

 

子向父 

 

this.$parent.status = true  // 修改父组件中status

 

兄弟组件中的传值

 

1.方法一（通过父组件中转传值）

 1.1 传统模式

爸爸A组件：
<div>  //爸爸A
    <components11 @updateInfo="updateInfo11"></components11>    //哥哥A1
    <components22 :sendData="msg22"></components22>　　//弟弟A2
</div>

data () {
    return {
      msg22: '上海'，
    }
  },
 methods: {
    updateInfo11 (data) { // 点击子组件按钮时触发事件
      this.msg22 = data.city  // 改变了父组件的值
    }
  }
哥哥A1组件：
<button @click='select()'>点击子组件</button>

 methods: {
    select () {
      let data = {
        city: '杭州'
      }
      this.$emit('updateInfo11', data)  // select事件触发后，自动触发updateInfo事件
    }
  }

 

A1要向A2传值 、 可以用$emit传给A、A在使用v-bind传给A2

 

 1.2 provide/inject 子组件必须是有共同的父或长辈

父组件：

<components11 ref="LeftComponent" />  // 子组件

provide() {
    return {
      eventStatus: this
    }
  },
data() {
   return{

  }
}
子组件1：

data() {
  return {
    selected: 1
 }
}

子组件2：

<button @click='eventChange'>点击子组件2修改子组件1的参数</button>

inject: ['eventStatus'],
methods: {
eventChange(){
  　this.eventStatus.$refs.LeftComponent.selected = 2
　　　}
}

2.方法二（通过Vue状态管理模式 Vuex）

 

首先，初始化store下index.js中的内容

import Vue from 'vue'
import Vuex from 'vuex'

//挂载Vuex
Vue.use(Vuex)

//创建VueX对象
const store = new Vuex.Store({
    state:{
        //存放的键值对就是所要管理的状态
        name:'helloVueX'
    }
})

export default store

然后，将store挂载到当前项目的Vue实例当中去

 

 

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,  //store:store 和router一样，将我们创建的Vuex实例挂载到这个vue实例中
  render: h => h(App)
})

最后，使用vuex暂存的值

 

...,
methods:{
    add(){
      console.log(this.$store.state.name)
    }
},
...