Vue 组件之间的通信

Vue组件之间的通信

父组件给子组件通信（传值）

• 在父组件页面中，给引入的子组件标签绑定一个自定义属性用来传值；
• 在子组件页面中，用props接受传递过来的数据
• props接受数据的方式有：
• • props：[‘自定义属性名’]
• • props：{自定义属性名：{//里面写数据类型等内容}}

代码示例：

//父组件中main.vue，引入子组件child1.vue
<template>
	...
	<child1 :data1=msg></child1>
	...
</template>
<!--msg是一个变量，如果是个字符串，就可以直接<child1 data1='msg'></child1>这样写-->
-----------------------------------------------------------------------------------
//子组件child1.vue中
<template>
	...
	<div>{{data1}}</div>
	<!-- 拿到的数据直接就可以用，就和用data中的变量一样 -->
	...
</template>
<script>
...
props: {
    data1: String
},
//用props接收数据，还可以直接写成：props：['data1']
//提示：props和data、methods、mounted等是同级的
...
</script>

子组件给父组件通信（传值）

• 在子组件页面中，使用$emit定义方法，将数据传递给父组件；
• 在父组件中，给子组件标签上用v-on（简写’@'）监听事件，从而拿到子组件传递过来的数据
• • 子组件中：this.$emit(‘自定义方法名1’,传递数据);
• • 父组件中：<子组件 v-on自定义方法名1=“方法名2”></子组件>
• • 自定义方法名1和方法名2可以一样

代码示例：

//子组件child2.vue中
<template>
	...
	<div @click="toData">点击这里传递数据给父组件</div>
	...
</template>
<script>
...
methods:{
	toData(){
      this.$emit('gotoData',List);
      //gotoData就是自定义的方法名，List是要传递过去的数据
    }
}
...
</script>
-----------------------------------------------------------------------------------
//父组件中main.vue，引入子组件child2.vue
<template>
	...
	<child2 @gotoData='gotoData2'></child2>
	<!-- 监听gotoData方法，gotoData和gotoData2名字可以一样 -->
	...
</template>
<script>
...
methods:{
	gotoData2(data){
      console.log(data,'子组件传递过来的数据')
      //gotoData2中的参数就是子组件传递过来的数据
    }
}
...
</script>

组件之间的通信

• 组件之间的通讯需要一个中央通信
• • 创建一个js文件，在需要互信的组件中引入
• 在父组件中同时引入两个组件

代码示例：

//1.创建一个作为中央通信的js文件，bus.js，页面中写入，这样创建，使用时每个页面都要引入
import Vue from "vue";
export default new Vue();
//2.在父组件main.vue中引入两个子组件
<template>
	...
	<child1></child1>
	<child2></child2>
	...
</template>
//3.在子组件child1.vue中传递出数据
<template>
	...
	<div @click="toData">点击这里传递数据给父组件</div>
	...
</template>
<script>
import Bus from '@/common/bus.js';//引入通信js文件
...
methods:{
	toData(){
      Bus.$emit('gotoData',msg);
    }
}
...
</script>
//4.在子组件child2.vue中接收数据
<script>
import Bus from '@/common/bus.js';//引入通信js文件
...
created(){
	//也可以在mounted中接收
	Bus.$on('gotoData',function(data){
		console.log(data,'传递的数据')//data就是child1中传递过来的数据
	});
}
...
</script>

注意：中央通信还有下面两种用法

• 中央通信还可以直接挂载到全局main.js中，直接可以用，不需要再引入

import Vue from 'vue';
Vue.prototype.$bus = new Vue();

• 中央通信还可以直接注册到根目录main.js中，直接可以用，不需要再引入

import Vue from 'vue';
new Vue({
	el: '#app',
	data：{
		bus: new Vue();
	}
});

以上是学习vue时，学习到的基本的组件互信的方法，下面还有一些开发时学到的方式

$parent 子组件调用父组件的方法进行互信

• 在子组件用，用：this.$parent.父组件方法名(要传递的数据)；调用父组件的方法

代码示例

//父组件中main.vue，引入子组件child1.vue
<template>
	...
	<child1></child1>
	...
</template>
<script>
...
methods:{
	toData(data){
		//在子组件中用$parent调用该方法
		console.log('子组件调用方法',data);
    }
}
...
</script>
-----------------------------------------------------------------------------------
//子组件child1.vue中
<template>
	...
	<div @click="toClick">点击这里调用父组件方法</div>
	...
</template>
<script>
...
methods:{
	toClick(){
      this.$parent.toData(list)；
      //调用父组件的toData方法，并把list变量传递过去
    }
}
...
</script>

$children 获取子组件的内容进行互信

• $children是一个数组，是子组件的集合，如果想要调用某个知道的子组件，可以使用索引值进行定位
• 不推荐使用

代码示例

//父组件中main.vue，引入子组件child1.vue，child2.vue，child3.vue
<template>
	...
	<child1></child1>
	<child2></child2>
	<child3></child3>
	...
</template>
<script>
...
mounted () {
	this.$children[0].data= "20220929"; 
	//索引值是0，获取了第一个子组件，并将其data变量的值进行了改变
	this.$children[2].gotoData();
	// 索引值是2，获取了第三个子组件，并调用了其方法gotoData；
},
...
</script>
-----------------------------------------------------------------------------------
//子组件child1.vue中
<template>
	...
	<div>{{data}}</div>
	<!-- data会随着父组件中的改变而变化 -->
	...
</template>
<script>
...
data(){
	return{
		data:'123456'
	}
}
...
</script>
//子组件child3.vue中
<script>
...
methods:{
	gotoData(){
		console.log('父组件中调用了');
	}
}
...
</script>

ref / $ref

• 获取元素节点，从而调用元素的方法或者获取元素的属性
• 在dom元素上添加 ref=“名字”, 然后可以通过’this.$refs.名字’来获取元素

代码示例

//父组件中main.vue，引入子组件child1.vue
<template>
   ...
   <child1 ref='child1'></child1>
   ...
</template>
<script>
...
mounted () {
   const dom = this.$refs.child1;
   console.log(dom,'拿到了子元素');
   dom.getData();//调用子组件中的方法getData
   //注意，如果或许元素的时候未获取到，可能是元素还没有挂载完成，可以在$nextTick中获取
},
...
</script>
-----------------------------------------------------------------------------------
//子组件child1.vue中
<template>
   <div>child1元素</div>
</template>
<script>
...
mounted:{
   getData(){
   	console.log('父组件调用了这个方法');
   }
}
...
</script>

cookie、localStorage、sessionStorage 本地存储的三种方式

cookie

• 之前整理过： cookie

localStorage、sessionStorage

• 在HTML5 中，出现了localStorage/sessionString两种本地存储的方法；
• 这两种方式都解决了cookie 存储空间过小的缺点,localStorage中一般浏览器支持的是5M大小；
• 而且不会随着http请求被发送出去。

localStorage、sessionStorage不同点

• localStorage存储的数据会永久存储，除非代码或手动删除才可以把数据进行清空
• sessionStorage存储的数据数据只会存在于当前会话，浏览器关闭则清空

用法

• sessionStorage 和 localStorage 的用法基本一致，引用类型的值要转换成JSON
• 将数据存储到本地

    sessionStorage.setItem('name', '字符串');
    localStorage.setItem('name', '字符串');
    // 如果存储的数据不是字符串类型的话，通过JSON.stringify(xxx)先把数据传换成字符串类型
    // 数据存储的形式是key-valve的形式，name对应的key

• 获取存储在本地的指定的数据

	sessionStorage.getItem('name');
	localStorage.getItem('name');

• 删除本地存储的指定的数据

    sessionStorage.removeItem('name');
    localStorage.removeItem('name');

• 删除所有保存的数据

    sessionStorage.clear();
    localStorage.clear();

本地存储的内容就先简单写一下用法，以后有机会再系统整理(^ . ^)。

vuex状态管理

• 白话说，vuex就是将好几个组件都会使用的数据存储到一个公共的容器中，使得每一个组件都可以通过指定的方式拿到数据进行使用，并且可以改变里面的数据；
• 状态管理后续会系统整理，先不在这里说了。