Vue学习笔记三（组件间通信）

什么是组件通信？解决方案是什么？

主要通信方式包括：

1、props属性

prop：组件上注册的一些自定义属性，如:username="zs"

父---->子，子传父也可以通过方法实现,传递的可以是一个数据对象，或者一个方法，是方法的时候子组件调用该方法，通过传参方式将数据传递给父组件。

父传子->

1、父组件定义数据

2、子组件通过自定义属性传递数据

3、子组件内部通过props接收数据

4、子组件内部使用接收到的数据

子传父

1、子组件通过this.$emit(‘方法名’，‘传递数据’)发送消息

2、父组件在子组件上通过@方法名(回调方法)来进行消息监听

3、监听到触发的方法后，执行回调方法，回调方法可以拿到传递过来的数据

<demo :age="18" :checkTodo="checkTodo"></demo>
  children组件中，通过props接收数据，props:['age','checkTodo']
  age可以直接使用，checkTodo方法可以直接调用，调用时候可以传参，参数可以传递给父组件

2、本地存储（localStorage/sessionStorage)

 3、自定义事件（子传父）

 4、全局事件总线（任意组件间通信）

 5、消息订阅与发布（类似全局事件总线，基本不用）

6、非父子通信

7、VueX（任意组件间通信）

Vuex是一个实现多组件共享的数据（状态）管理的插件，当多个组件使用同一状态或者多组件变更同一状态时使用。相当于是一个全局的变量，一次定义，各个组件都可以读写。

import Vue from 'vue'	// 引入Vue核心库
import Vuex from 'vuex'	// 引入Vuex

Vue.use(Vuex)	// 应用Vuex插件
   
// 准备actions对象——响应组件中用户的动作
const actions = {
    addOdd(context,value){
        console.log("actions中的addOdd被调用了")
        if(context.state.sum % 2){context.commit('ADD',value)}
    },
    addWait(context,value){
        console.log("actions中的addWait被调用了")
        setTimeout(()=>{context.commit('ADD',value)},500)
    },
}
// 准备mutations对象——修改state中的数据
const mutations = {
    ADD(state,value){state.sum += value},
    SUB(state,value){state.sum -= value}
}
// 准备state对象——保存具体的数据
const state = {
    sum:0 // 当前的和
}
// 准备getters对象——用于将state中的数据进行加工
const getters = {
    bigSum(){
        return state.sum * 10
    }
}
   
//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

<template>
	<div>
		<h1>当前求和为：{{ $store.state.sum }}</h1>
		<h3>当前求和的10倍为：{{ $store.getters.bigSum }}</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	export default {
		name:'Count',
		data() {
			return {
				n:1,
			}
		},
		methods: {
			increment(){this.$store.commit('ADD',this.n)},
			decrement(){this.$store.commit('SUBTRACT',this.n)},
			incrementOdd(){this.$store.dispatch('addOdd',this.n)},
			incrementWait(){this.$store.dispatch('addWait',this.n)},
		},
	}
</script>

<style>button{margin-left: 5px;}</style>

getters配置项

8、V-model 原理及简化表单类组件

当子组件中是表单类组件并且事件名称与对应的组件事件一致，如input组件事件名叫input select组件叫 select，可以使用v-model简化代码

9、ref与$refs

10、Vue异步更新$nextTick