Props 混入 插件 插槽 本地存储
Props介绍
Props作为组件的核心特性之一，也是我们平时开发Vue项目中接触最多的特性之一，它可以让组件的功能变得丰富，也是父子组件通信的一个渠道。
【1】普通传值
在组件的标签上自定义属性，用属性绑定给改自定义属性绑定一个变量，组件内部定义props数组，将自定义的属性名填入，即可在组件内使用父组件传入的变量，变量名就是自定义的组件。
父组件
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
// 自定义属性，并且绑定一个变量message
<index :mymessage="message"></index>
</div>
</template>
<script>
import index from "../components/index.vue";
export default {
name: 'HomeView',
data(){
return{
message:'hqq'
}
},
components: {
HelloWorld,
index
}
}
</script>
子组件
<template>
<div class="index">
<h1>我是小组件</h1>
<button @click="handleShow">点我看控制台</button>
</div>
</template>
<style scoped>
</style>
<script>
export default {
name: 'index',
data(){
return{
name:''
}
},
methods:{
handleShow(){
console.log(this.mymessage)
}
},
// 使用props数组接收mymessage自定义属性名，就可以在当前组件使用这个变量
props:['mymessage']
}
</script>
【2】限制数据类型
通过给子组件的props传一个对象{{自定义属性名: 数据类型}}这样子就会限制父组件传来的数据的类型，如果传了不同的类型的数据，浏览器控制台会警告，但是不会直接报错。
子组件
<script>
export default {
name: 'index',
data() {
return {
name: ''
}
},
methods: {
handleShow() {
console.log(this.mymessage)
}
},
// 给props传一个对象
props: {mymessage: String}
}
</script>
【3】传对象
这样做可以对父组件传来的数据进一步限制
子组件
props: {
name:'mymessage', // 自定义属性名
required:true, // 是否是必须填的
type:String, // 限制数据类型
default:'隔壁老王来了' // 默认值
}
混入
mixin混入，可以把多个组件共用的配置提取成一个混入对象，这样就不需要在每个组件都写了。
就相当于写了一个功能，很多个页面都需要用这个功能，这时候就可以把这个功能封装起来，下次需要使用的时候直接导入就行
【1】封装 导出
最好创建一个文件夹，mixin，再创建一个index.js，在这里面写封装的功能
const hunru = {
data() {
return {
title: '好好学习'
}
},
methods: {
handleClick() {
alert(this.title)
console.log(this.title)
}
}
}
// 一定要把功能导出
export default hunru
【2】导入
在需要使用的页面导入该模块，配置mixins属性
<template>
<div class="about">
<h1>This is an about page</h1>
<button @click="handleClick">弹窗</button>
</div>
</template>
<script>
// 导入模块
import hunru from "@/mixin";
export default {
name:'about',
data(){
return{
}
},
methods:{},
// 配置mixins 将模块名填入数组
mixins:[hunru]
}
</script>
【3】全局使用
上面的方法都是局部使用的方法，也可以进行全局配置，在main.js里面进行全局配置
import hunru from "@/mixin";
Vue.mixin(hunru)
插件
插件其实就是vue的增强功能，通常用来为vue添加全局功能
【1】常见功能
一般有以下几种功能
- 添加全局方法或者 property。如: vue-custom-element
- 添加全局资源: 指令/过滤器/过渡等。如 vue-touch
- 通过全局混入来添加一些组件选项。如 vue-router
- 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
- 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router
【2】开发插件
开发插件也叫定义插件，主要是通过install方法来暴露的，参数，vue实例以及自定义参数。无论在install中写什么，vue都会替你执行
export default {
install(a) {
// 1 定义全局变量
Vue.prototype.name = 'hqq'
// 2 定义全局变量最好加上$前缀，防止污染
Vue.prototype.$axios = axios
// 3 可以直接定义一个函数，如登录，以后要登录直接调用即可
Vue.prototype.$login = (url, username, password) => {
axios.post('http://127.0.0.1:8000/api/v1/user/login/', {
username: username,
password: password
})
.then((response) => {
alert('登录成功')
})
}
}
}
export default {
install: function(Vue) {
console.log('Vue', Vue);
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
console.log('这是插件的全局方法');
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
console.log('这是插件的全局指令');
}
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
console.log('这是插件的混入');
}
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
console.log('这是插件的实例方法');
}
}
}
【3】使用插件
使用插件分为全局引用和局部引用
全局引用
在main.js中引入并且使用
// 引入
import my from '@/plugins'
// 使用
Vue.use(my)
局部引用
局部引用，在需要用到插件的页面use就行
<script>
// 导入插件
import my from '../plugins'
// 导入Vue实例
import Vue from "vue";
export default {
name: 'HomeView',
created() {
console.log(this.name)
// 使用插件
Vue.use(my)
// 输出插件里面定义的name
console.log('hahaha',this.name)
}
}
</script>
插槽
Vue插槽的主要作用是承载分发内容的出口，分为匿名插槽具名插槽和作用域插槽三种
以下面为例子
- child.vue：封装 name 为 ChildExample 的组件
- parent.vue：引入 child.vue，调用 ChildExample 组件
【1】匿名插槽
<slot> </slot>是最常用的插槽，根据需要自定义内容
// child.vue
<slot></slot>
// parent.vue
<child-example>
<span>这是匿名插槽的内容</span>
</child-example>
【2】具名插槽
假设一个插槽满足不了要求，需要设置多个插槽，那么就必须要给插槽赋name值
匿名插槽是特殊的具名插槽，它的name为default
// child.vue
<slot name="left"></slot>
<slot name="right"></slot>
// parent.vue
<child-example>
<span slot="left">这是具名插槽left的内容</span>
<!-- 2.6.0 + -->
<template v-slot:right>
<span>这是具名插槽right的内容</span>
</template>
</child-example>
本地存储
本地存储通常用于保存用户登录信息
通常有三种方式sessionStorage，localStorage和vue-cookies
vue-cookies是第三方插件，需要下载
【1】sessionStorage和localstorage的区别
- sessionStorage 中的数据仅在当前会话有效，也就是说当用户增加了标签页或者关闭浏览器之后，保存的数据就会丢失。
- localstorage 中的数据可以说是永久有效的，只要用户不主动清除，就会一直存在。
【2】操作sessionStorage
// 增
sessionStorage.setItem(‘key’, ‘value’)
// 查
sessionStorage.getItem(‘key’)
// 删除单个key数据
sessionStorage.removeItem(‘key’)
// 清除sessionStorage所有数据
sessionStorage.clear()
【3】操作localstorage
// 增
localstorage.setItem(‘key’, ‘value’)
// 查
localstorage.getItem(‘key’)
// 删除单个key数据
localstorage.removeItem(‘key’)
// 清除sessionStorage所有数据
localstorage.clear()
【3】使用vue-cookies
这是一个简单的Vue.js插件，专门用于在vue中处理浏览器的cookie操作，vue-cookies没有依赖关系，它可以独立存在，对vuejs友好。
安装 引用
// 安装
npm install vue-cookies --save
// 引用
import Vue from 'vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)
API
//不写过期时间，默认为1天过期
this.$cookies.set("token","123456")
// 1天过期，忽略大小写
this.$cookies.set("token","12346","1d")
this.$cookies.set("token","123456","1D")
// 以秒为单位，设置1天过去
this.$cookies.set("token","123456",60 * 60 * 24)
// 填写Date对象，明确指定过期时间
this.$cookies.set("token","123456", new Date(2020, 10, 01))
// 填写一个时间字符串，指定过期时间
this.$cookies.set("token","123456", "Sat, 13 Mar 2017 12:25:57 GMT")
//浏览器会话结束时过期
this.$cookies.set("token","input_value","0");
//永不过期
this.$cookies.set("token","input_value",-1);
