学习笔记（9）vue组件通信方式

1，路由传参

请阅读，8 — router第四个目录
链接: 点击进入.

2，props/$emit

2.1，props—父传子

//子组件
<template>
   <div>
      <h1>我是子组件</h1>
<!--2，模板中显示接收到的数据-->
      <div>{{message}}</div>
   </div>
</template>

<script>
   export default {
      name: 'child',
      //1，使用props，定义属性，用于接收父组件的传值
      props:['message'],
   };
</script>

//父组件
<template>
   <div>
      <h1>我是父组件</h1>
      <!--3，模板中设置。要传递的数据。可以是data中的，也可以自定义-->
      <child message='这是父传子的数据——hello'></child>
   </div>
</template>

<script>
//1，导入子组件
   import Child from './child'
   export default {
      name: 'parent',
      data() {
         return {};
      },
      //2，在父组件中，注册子组件
      components:{
         Child,
      }
   };
</script>

捋一下：

1. 在子组件，props中创建一个属性，接收父组件的传值
2. 在子组件，模板中添加props中创建的属性
3. 在父组件中，导入并注册子组件
4. 在父组件中，把需要传给子组件的值赋给该属性

2.2，$.emit—子传父

//子组件
<template>
   <div>
      <h1>我是子组件</h1>
      <el-button type="info" @click="ChildTheParent">子传父</el-button>
   </div>
</template>

<script>
   export default {
      name: 'child',
      methods:{
         ChildTheParent(){
            this.$emit('ChildListen','在周末晚上关上了手机，舒服窝在沙发里');
         }
      }
   };
</script>
------------------------------------------
//父组件
<template>
   <div>
      <h1>我是父组件</h1>
      <child message='这是父传子的数据——hello' @ChildListen="parentAccept"></child>
   </div>
</template>

<script>
   import Child from './child'
   export default {
      name: 'parent',
      components:{
         Child,
      },
      methods:{
         parentAccept(param){
            console.log(param)
         }
      }
   };
</script>

捋一下：

1. 子组件中需要添加监听事件，在事件方法中，使用vue.$emit发射一个自定义事件，vue.$emit有2个参数：1参是事件名字，2参是需要传递的数据。
2. 在父组件中导入，注册子组件并在子组件标签上绑定对自定义事件的监听。

3，EventBus（事件总线）

1. 创建事件总线

//1，创建法：创建一个bus.js文件,引入vue，创建一个vue实例，导出这个实例。
//eventBus.js
import Vue from 'Vue'
export default new Vue

//2，挂载法：直接挂载到main.js中,（我比较喜欢用这种）
//main.js
//事件总线
Vue.prototype.$EventBus = new Vue();

2. 发射事件

//在需要传值的组件中，用$emit发射事件，
// $emit有2个参数：1参是发射事件的名字，2参是要传递的数据

//如果你在创建事件总线时，采用的是创建法，这里需要先导入你的bus文件
import Bus from './bus'
//然后发射事件
// Bus.$emit('sendDataListen',this.message);

//如果是挂载法，
//注意：this.$xxx要和挂载时的保持一致
this.$EventBus.$emit('sendDataListen',this.message);

3. 监听事件（接收事件）

//在需要接收数据的组件中，用$on监听事件，
//如果你在创建事件总线时，采用的是创建法，这里需要先导入你的bus文件
import Bus from './bus'
   //注意：发送和监听的事件名称必须一致，value就是获取的数据.
// Bus.$on('sendDataListen',value => {
	console.log(value);
})

//创建法
this.$EventBus.$on('sendDataListen',value => {
      console.log(value);
 })

4. 清除事件总线

//为什么要清除事件总线？
/*如果不清除，事件会一直存在，每次进入到需要接收数据的组件中，事件都会获取数据，*/
//可以在beforeDestroy生命周期中，使用$off清除事件，参数是事件的名字。
beforeDestroy(){
   // Bus.$off('sendDataListen');
   this.$EventBus.$off('sendDataListen');
   console.log('bus事件销毁完成!!!')
}      

4，parent/children

4,1，父传子

<!--父组件-->
<template>
   <div>
      <button @click="editChi">修改子组件data中的数据</button>
      <child></child>
   </div>
</template>

<script>
   import Child from './child'
   export default {
      name: 'parent',
      data() {
         return {};
      },
      components:{
         Child,
      },
      methods:{
         editChi(){
            // console.log(this.$children);
            //使用$children获取，修改子组件的数据
            this.$children[0].lyric = '天青色等烟雨，而我在等你'
         }
      }
   };
</script>

4.2，子传父

<!-- 子组件 -->
<template>
   <div class="root">
      <p>获取父组件的数据为: {{fathVal}}</p>
   </div>
</template>

<script>
   export default {
      name: 'child',
      data() {
         return {};
      },
      computed:{
         fathVal(){
            //console.log(this.$parent)
            //使用$parent获取，修改父组件的数据
            return this.$parent.message;
         }
      }
   };
</script>

注意：$parent，得到的是个对象，而$children 的是数组。

5，provide/ inject

provide/inject是vue 2.2.0 新出的api,主要用于父、子、孙及所有后代之间的通信。通过provide属性在父组件中指定要传递的数据，在需要的子孙组件(不论组件嵌套有多深)中通过inject接收数据。

<!-- 父组件-->
<template>
   <div>
      <h1>我是父组件</h1>
      <div>
         <chi></chi>
      </div>
   </div>
</template>

<script>
   import  Chi from './chi'
   export default {
      name: 'par',
      provide: {
         text: "勇敢牛牛，不怕困难"
      },
      components:{
         Chi,
      },
   };
</script>

//路由配置
{
   path: '/provide/par',
   name: 'providepar',
   //路由懒加载
   component: resolve => require(['@/pages/provide/par'],resolve)
},

<!-- 子组件 -->
<template>
   <div class="root">
      <h3>我是子组件</h3>
      <div>来自父组件的数据：{{text}}</div>
   </div>
</template>
<script>
   export default {
      name: 'chi',
      data() {
         return {};
      },
      inject: ["text"],
   };
</script>

6，ref / refs

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向子组件实例，可以通过实例直接调用子组件的方法或访问数据，

<!-- 父组件  -->
<template>
   <div>
      <h1>我是父组件</h1>
      <div>
         <chi ref="son"></chi>
      </div>
   </div>
</template>

<script>
   import  Chi from './chi'
   export default {
      name: 'par',
      provide: {
         text: "勇敢牛牛，不怕困难"
      },
      components:{
         Chi,
      },
      mounted() {
         const Son = this.$refs.son;
         //访问子组件的数据
         //获取子组件的name
         console.log(Son.$options.name); //
         console.log(Son.num); //99
         //调用子的方法
         Son.introduce(); //我是小明，今年21，来自子组件。
      }
   };
</script>

<!--  子组件 -->
<template>
   <div class="root">
      <h3>我是子组件</h3>
   </div>
</template>

<script>
   export default {
      name: 'childen',
      data() {
         return {
            num:99,
         };
      },
      methods:{
         introduce(){
            console.log('我是小明，今年21，来自子组件。')
         }
      }
   };
</script>

7，localStorage/sessionStorage

localStorage，sessionStorage的区别：

1. 都是存储客户端信息的，
2. localStorage的有效期是永久，除非主动删除。
3. sessionStorage的有效期是当前窗口或标签页，只要窗口（标签页）关闭，在sessionStorage存储的数据也会被清除。

//localStorage.setItem,本地存储：2个参数，1参数据的key(取值时用到)，2参是数据的值
   localStorage.setItem('grade',this.grade)
   //sessionStorage.setItem('geming','星星水手')

//localStorage.getItem,获取数据，参数是数据的key
   // this.lyric = localStorage.getItem('grade')
   this.lyric = sessionStorage.getItem('geming')

8，$attrs

<!-- 父组件 -->
<template>
   <div>
      <h1>我是父组件</h1>
      <div>
         <chi  name="dalong" :age="30" :hegiht="170" jieshao="我来自河南"></chi>
      </div>
   </div>
</template>

<script>
   import  Chi from './chi'
   export default {
      name: 'par',
      components:{
         Chi,
      },
   };
</script>

<!-- 子组件 -->
<template>
   <div class="root">
      <h3>我是子组件</h3>
   </div>
</template>

<script>
   export default {
      name: 'childen',
      created() {
         console.log(this.$attrs); //Object { name: "dalong", age: 30, hegiht: 170, jieshao: "我来自河南" }
      },
   };
</script>

9，vuex（状态管理工具）

请点击阅读: vuex.