vue组件传值

一、父组件给子组件传值

即父组件通过属性的方式向子组件传值，子组件通过 props 来接收。

父组件:

<template>
   <child :text="text"></child>
</template>
<script>
import child from "./child.vue"
export default {
     components: {child},
     data(){
      return {text:"我是父组件传递的值"}
     }
}
</script>

子组件接收的父组件的值分为引用类型和普通类型两种

• 普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）
• 引用类型：数组（Array）、对象（Object）

普通类型子组件接收如下

子组件：

<template>
  <div>{{text}}</div>
</template>
<script>
  export default {
    props:["text"]
    或者：props:{
	    text:{
	    	type: String,    //类型（类型可以定义多个，例子：type: [String,Number]）
	    	default: ""      //默认值
	    	required：false   //是否为必传项
	    }
    }
  }
</script>

引入类型子组件接收如下

<template>
  <div>{{text}}</div>
</template>
<script>
  export default {
    props:["text"]
    或者：props:{
	    text:{
	    	type: Array,
      		default: function () {
        		return ['张三']
      		}
	    }
    }
  }
</script>

扩展各种的写法：

 props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 数组写法
     propK: {
      type: Array,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return ['张三']
      }
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: (value) =>['success', 'warning', 'danger'].indexOf(value) !== -1
    }
  }

---

二、子组件向父组件传值

1.通过 this.$emit() 来触发

在子组件中绑定一个事件，并给这个事件定义一个函数

子组件：

<template>
   <button @click="dataTofather">点击</button>
</template>
<script>
  export default {
    data () {
      return {
        message: '啦啦啦啦'
      }
    },
    methods:{
      dataTofather(){
        this.$emit("childToParent",this.message,true);
      }
    }
  }
</script>

父组件：

<template>
  <child @childToParent="reviceSondata"></child>
</template>
<script>
import child from "./child.vue"
  export default {
    components: {child},
    methods:{
      reviceSondata(data){
        console.log(data);
      }
    }
  }
</script>

2. 通过 callback 函数

先在父组件中定义一个callback函数，并把 callback 函数传过去

// 父组件
<child :callback="callback"></child>
​
methods: {
    callback: function(name) {
        this.name = name
    }
}

在子组件中接收，并执行 callback 函数

// 子组件
<button @click="callback('Jack')">改变父组件的name</button>
​
props: {
    callback: Function,
}

3. 通过 $parent / $children 或 $refs 访问组件实例

这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。

// 子组件
export default {
  data () {
    return {
      title: '子组件'
    }
  },
  methods: {
    sayHello () {
        console.log('Hello');
    }
  }
}

// 父组件
<template>
  <child ref="childRef" />
</template>
​
<script>
  export default {
    created () {
      // 通过 $ref 来访问子组件
      console.log(this.$refs.childRef.title);  // 子组件
      this.$refs.childRef.sayHello(); // Hello
      
      // 通过 $children 来调用子组件的方法
      this.$children.sayHello(); // Hello 
    }
  }
</script>

注：$parent是子组件访问父组件，用的非常少——考虑到耦合度的原因

• 子组件访问根组件：$root

三、vuex

store.js：

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

Vue.use(Vuex)

const store = new Vuex.Store({
  // 定义状态
  state: {
    headImg: JSON.parse(sessionStorage.getItem('headImg')) || ""
  },
  mutations: {
    newImg(state, msg){
      sessionStorage.setItem('headImg', JSON.stringify(msg))
      state.headImg = msg;
    }
  }
})

export default store

main.js中引入vuex

import Vue from 'vue';
import Vuex from 'vuex';
import store from './vuex/store';
Vue.use(Vuex);
var v = new Vue({
  el: '#app',
  router,
  store,
  components: {index},
  template: '<index/>',
  created: function () {

  }
})

传值：this.$store.commit("newImg", value);
取值：this.$store.state.headImg

注：vue-store的详细用法

四.兄弟组件传值

1. 还是通过 $emit 和 props 结合的方式

在父组件中给要传值的两个兄弟组件都绑定要传的变量，并定义事件

// 父组件
<child-a :myName="name" />
<child-b :myName="name" @changeName="editName" />  
    
export default {
    data() {
        return {
            name: 'John'
        }
    },
    components: {
        'child-a': ChildA,
        'child-b': ChildB,
    },
    methods: {
        editName(name) {
            this.name = name
        },
    }
}

在子组件B中接收变量和绑定触发事件

// child-b 组件
<p>姓名：{{ myName }}</p>
<button @click="changeName">修改姓名</button>
    
<script>
export default {
    props: ["myName"],
    methods: {
        changeName() {
            this.$emit('changeName', 'Lily')   // 触发事件并传值
        }
    }
}
</script>

// child-a 组件
<p>姓名：{{ newName }}</p>
    
<script>
export default {
    props: ["myName"],
    computed: {
        newName() {
            if(this.myName) { // 判断是否有值传过来
                return this.myName
            }
            return 'John' //没有传值的默认值
        }
    }
}
</script>

2.建立一个公共的js⽂文件，专⻔门⽤用来传递消息

bus.js

import Vue from 'vue'
const Bus = new Vue();
export default Bus;

在需要传递消息的地⽅方引⼊入

mport Bus from './util/bus'
methods: {
  passMsg () {
    Bus.$emit('msg', 'i am from app')
  }
},

   传递消息，在需要接受消息的地方使用bus.$on接受消息

mounted () {
    Bus.$on('msg', (val) => {
      this.childMsg = val
    });

五.provide和inject使用

常用的父子组件通信方式都是父组件绑定要传递给子组件的数据，子组件通过props属性接收，一旦组件层级变多时，采用这种方式一级一级传递值非常麻烦，而且代码可读性不高，不便后期维护。

vue提供了provide和inject帮助我们解决多层次嵌套嵌套通信问题。在provide中指定要传递给子孙组件的数据，子孙组件通过inject注入祖父组件传递过来的数据。

//父组件
import Child from './Child'
export default {
  name: 'Parent',
  //传递的数据
  provide: {
  
	nameFromParent: 'Kevin'
  }
  components: {
    Child
  }
}

//所有子组件，包括孙组件
data() {
            return {
                name: 'Two sons',
                msg:'',
            }
        },
        inject:['nameFromParent'],
        mounted(){
            this.msg = this.nameFromParent;
        }
}

注：provide 和 inject 绑定并不是可响应的。