11一些小配置项

小的配置项

ref属性

• 被用来给元素或子组件注册引用信息(id的替代者)

• 应用在html标签上，获取的是真实的DOM元素，应用在组件标签上是组件实例对象(vc)

<h1 ref="xxx">
  ...
</h1>
# 或者
<School/ ref="xxx">

# 获取: this.$refs.xxx

---

配置项props

• 功能--->让组件接收外部传过来的数据

// 在Demo组件中使用数据(由他人定义的数据)
<Demo name = "李四">


// 在Demo组件中定义props,接受数据
props:{
  name:{
    type: String,     //限制类型
    required: true    //必要性
    default: "李四"    //默认值,可选参数
  }
}

• props是只读的，Vue底层会检测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据

---

mixin混入

• 功能--->可以把多个组件共用的配置提取成一个混入对象

// 在src目录下(根据实际情况选择位置)新建 mixin.js文件,并且将其暴露出去

export default{
  methods:{   //定义一个方法
    showMsg(){
      alert(this.name)
    }
  }
}

#在组件中写入相关配置

import default form "../mixin" # 导入mixin文件

export default{
  data(){
    ...
  },

  mixins:[mixin]  #启用mixin混入功能

}

---

插件

想要开发插件，先要认识一个插件是什么样子的,Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象,

新建一个plugin.js文件

MyPlugin.install = function (Vue, options) {

  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
  // ...组件选项
})

webStorage

• 存储内容一般支持5MB左右(不同浏览器可能不一样)
• 浏览器端通过Window.sessionStorage 和Window.localStorage属性来实现本地存储机制

相关API

xxxxx.Storage.setItem('key','value');
  //该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值
xxxxx.Storage.getItem('person');
  //该方法会接受一个键名作为参数，返回键名对应的值
xxxxx.Storage.removeItem('key');
  //该方法接受一个键名作为参数，并把该键名从存储中删除
xxxxx.Storage.clear()
  //该方法会清除存储中的所有数据

备注

• SessionStorage存储的内容会随着浏览器窗口关闭而消失

• LocalStorage存储的内容需要手动清除才会消失

• xxxxx.Storage.getItem('xxx);如果xxx对应的value获取不到，那么getItem的返回值是null

• JONS.parse(null)的结果依然是null

插槽

• 作用:让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件
• 分类:
  • 默认插槽
  • 具名插槽
  • 作用域插槽

使用方法

默认插槽
//父组件中：
<Category>
   <div>html结构1</div>
</Category>

子组件中：
<template>
   <div>
   <!-- 定于插槽 -->
   <slot>默认插槽内容</slot>
   </div>
</template>