vue基础知识笔记03

vue

1.0 组件通信

什么是组件通信？

​ 组件需要跟函数一样传递参数，当组件与组件之间传递参数,就叫做组件通信。

组件的使用：

​ 组件的引入 import xx from ‘xx/xx’

​ 组件的注册 components：{}

​ 组件的使用 <组件名 /> 如果函数没有定义参数，那就是写死的，该函数没有太大的意义，组件也是如此

2.0 组件的分类

​ 父传子通信： 父组件向子组件传递参数

​ 子传父通信： 子组件向父组件传递参数

​ eventBus： 兄弟、子孙等等之间通信

注意：怎么区分父组件?

​ 只要在我的页进行了组件的引入，组件的注册，并且在template中使用了组件，我就是你爸爸

3.0 父子组件通信

​ 怎么传参？

​ 在父组件页面的子组件标签上，添加自定义的属性

<tempalte>
    <son  属性1="这是写死的值" :属性2="表达式" />
</template>

​ 怎么接收？

​ 在子组件props接收父组件传进来的数据

<tempalte>
    {{message}} ---- {{ 属性1 }}---- {{ 属性2 }}
</template>
<script>
    export default {
		// 父传子参数的接收
		// 写法一
		props:['属性1'，'属性2']，
        // 写法二 (推荐)  
        // 可以对传入的数据进行限制，类型、是否必传、默认值
        props:{
            属性1:{
                required:true， // 是否必传
                type:构造函数, // Array,Object,Number,String,Boolean // 传入的类型
                default:'' // 默认值
            }，
            属性2: {
                	type: Number || String || Boolean 
                    default:0    ||   ''   || false
            	  },
                  {// 数组
                      type:Array,
                      default:()=>{
                         return []
                      }
                  }，
                  {// 对象
                      type:Object,
                      default:()=>{
                         return {}
                      }
                  }
        }
        data(){
            return {
                message：'xxx'
            }
        }
	}
</script>

4.0 子父组件通信

​ 子组件向父组件传递参数不能直接传，子组件只能通过触发自定义事件进行传递，在父组件通过触发自定义事件进行参数的接收

​ 怎么传递？ 通过方法this.$emit(‘自定义事件’,参数)

fun(){
   	this.$emit('自定义事件',{参数，参数1，参数2})
   	this.$emit('自定义事件',参数，参数1，参数2)
}

​ 怎么接收？ 父组件通过在标签上定义事件

<template>
    <Son @自定义事件="处理函数()" />
</template>
<script>
    methods:{
        处理函数（data）{
            // 在此处赋值data
        }
    }
</script>

5.0 eventBus

​ 又叫做中央事件总线Bus

​ 实现：通过创建一个Vue实例当作中介，挂载到原型对象上，通过事件进行传递数据

​ 缺点： 维护起来成本极高,传递数据极乱

​ 创建中介：

#main
// 创建一个中介 挂载到原型对象上
Vue.prototype.$bus = new Vue()

​ 发送信息：

#A.vue
methods:{
    fun(){
        this.$bus.$emit('触发事件',参数)
    }
}

​ 接收信息：

#B.vue
created(){
    this.$bus.$on('触发事件',(参数)=>{
        	// 参数处理
    })
}

6.0 插槽

​ 什么是插槽？

​ 在子组件了留了个坑，在父组件使用子组件时填这个坑，这就是插槽

6.1 插槽的分类

​ 1、匿名插槽（默认插槽）

​ 在子组件定义的插槽

<tempalte>
    <div>
    	  <slot></slot>  // 匿名插槽
    </div>
</template>

​ 在父组件中使用插槽

<template>
    <son>
    	你要在插入到匿名插槽位置的内容
    </son>
</template>

​ 2、具名插槽

​ 在子组件定义多个具名插槽

<tempalte>
    <div>
    	  <slot name="插槽名1"></slot>  // 具名插槽
    	  <slot name="插槽名2"></slot>  // 具名插槽
    	  <slot name="插槽名3"></slot>  // 具名插槽
    </div>
</template>

​ 在父组件中使用插槽

<template>
    <son>
    	<标签 slot='插槽名1'/>
    	<组件 slot='插槽名2'/>
    	<标签 slot='插槽名3'/>
    </son>
</template>

​ 3、作用域插槽

​ 在子组件的数据通过插槽传递给父组件

​ 发送参数：

​ 在子组件插槽标签上定义自定义的属性

<slot :属性1="属性值1" :属性2="属性值2"></slot>

​ 接收参数：

​ 在父组件插槽位置 使用属性

<子组件>
    <h1 slot="插槽名" slot-scope="变量名">
        {{ 变量名.属性名 }}
    </h1>
<子组件>

7.0本地存储

通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储

localStorage（永久存储）： 永久的存储在本地，除非手动销毁

//存储
localStorage.setItem(key, value);//key和value都必须是字符串。
eg:localStorage.setItem("id", 123); 
//如果需要存入的值是一个对象则需要使用JSON.stringify()转换一下，将对象先转化成字符串
eg:let params={name:'张三',age:'18',sex:'男'}
   localStorage.setItem('params',JSON.stringify(params))

//获取
localStorage.getItem(key);
eg:localStorage.getItem("id");
//获取对象，需要JSON转换一下，将字符串转化成对象
eg：let params=JSON.parse(localStorage.getItem('params'))

//删除
删除 localStorage.removeItem(key)
eg：localStorage.removeItem('params')

//清空 
localStorage.clear() （会将存储的所有数据清空）

sessionStorage(页面关闭销毁)： 当页面关闭时销毁

// 存储
sessionStorage.setItem("id",123);
 
// 获取
sessionStorage.getItem("id")；

//相关方法同上