Vue传值

学习一下Vue传值的方式：Vue通信、传值的多种方式

传值

1. 通过路由带参数进行传值。
2. 通过设置Session Storage 缓存的形式进行传值。

// A组件缓存user
const user = { 'name': 'Lucy', 'age': 18}
sessionStorage.setItem('缓存名称', JSON.stringify(user))

// B组件获取缓存
const userB = JSON.parse(sessionStorage.getItem('缓存名称'))

3. 父组件传值给子组件
   如果参数很多，可以使用json 数组{} 的形式。
   也可以使用$children 来访问组件实例的方法和数据。

• 普通参数

<!-- 父组件 -->
<div class="parent">
	<children number=18 />
</div>
<script>
	import Children from 'components/children'
	export default{
		components:{
			Children
		}
	}
</script>

<!-- 子组件 -->
<div class="children">
	{{ number }}
</div>
<script>
 export default{
 	props: {
 		// 限制父组件传递过来的参数的数据类型，如果不符合就会报错
 		// 也可以不考虑数据类型，直接：props: ["number", "string"]
 		'number': [Number, String, Object],
 		'string': [String]
 	}
 }
 </script>

• 接收的参数是动态的，比如用v-model 绑定的input

<!-- 父组件 -->
<div class="parent">
	<input type="text" v-model="inputText" />
	<!-- 不支持驼峰命名，可以使用 - 分隔 -->
	<children :input-val="inputText" />
</div>

<!-- 子组件 -->
<div class="children">
	<!-- 可以使用驼峰 -->
	{{ inputVal }}
</div>
<script>
 export default{
 	props: {
 		'input-val': [String]
 	}
 }
</script>

• 传递的数据是异步请求
  原因：异步请求时，数据还没有获取到，但已经开始渲染节点了
  解决方法：可以在父组件传递数据的节点上加上 v-if=false，异步请求结束后，v-if=true

4. 子组件传值给父组件
   也可以使用$parent 来访问组件实例的方法和数据。

<!-- 子组件 -->
<div class="children">
	<button @click="emitToParent">
		点击按钮传值给父组件
	</button>
</div>
<script>
 export default{
 	methods: {
 		emitToParent() {
 			// $emit 不支持驼峰命名
 			this.$emit("child-event", "我是子组件往父组件传递的内容")
 		}
 	}
 }
</script>

<!-- 父组件 -->
<div class="parent">
	<!-- @child-event 是子组件自定义的方法，parentEvent 是父组件的一个方法 -->
	<children @child-event="parentEvent" />
</div>
<script>
	import Children from 'components/children'
	export default{
		methods: {
	 		parentEvent(data) {
	 			// data：子组件传过来的数据
	 			console.log(data)
	 		}
 		}
	}
</script>

5. 子组件改变父组件的属性的值 （没懂）
   还有 $listeners也没懂
   可以使用 .sync修饰符简写为：
   参考：.sync的使用

// 父组件，data中有：count: 0
<children :count.sync="count" />

// 子组件（updata: 自定义名称）
this.$emit('updata: count', '2')

6. 不同组件的传值，通过eventBus（页面少使用eventBus，多页面使用Vuex）
   先初始化，创建一个eventBus.js 文件，或者直接在main.js 中初始化

// eventBus.js
import Vue from "vue"
export const eventBus = new Vue()

// main.js
Vue.prototype.$eventBus = new Vue() // 全局
// 在使用全局时，组件内部写this.$eventBus

A页面点击按钮，向B页面发送一则消息

<!-- A页面 -->
<template>
    <button @click="sendMsg()">发送</button>
</template>
<script> 
import { eventBus } from "../eventBus.js";
export default {
	methods: {
		sendMsg() {
			// aMsg是方法名，后面的则是参数
    		eventBus.$emit("sendInfor", '来自A页面的消息');
    	}
  	}
}; 
</script>

<!-- B页面 -->
<template>
	<p>{{ msg }}</p>
</template>

<script> 
import { eventBus } from "../eventBus.js";
export default {
	data(){
		return {
			msg: ''
	    }
	},
	mounted() {
		// 先移除该事件的监听，不然它会一直存在
		eventBus.$off("sendInfor", {})
		// 监听该事件，并接收消息
		eventBus.$on("sendInfor", (msg) => {
			// A发送来的消息
			this.msg = msg;
		});
	}
};
</script>