马格南摄影网站软文发稿平台

---

---

一、使用Vue脚手架

1.ref和props属性

ref属性：
（1）被用来给元素或子组件注册应用信息（id的替代者）
（2）应用在html标签上获取的是真实DOM元素，或应用在组件标签上是组件实例对象（VC）
（3）使用方法：打标识：

<h1  ref="xyz"></h1>或<School ref="xyz"></School>

提取标识：

this.$refs.xyz

props属性：
功能：让组件接收外部传过来的数据
如父组件给子组件传递数据，还可以让子组件给父组件传递数据，先在父组件中定义方法，子组件回调即可
使用：
（1）传递数据 ：
（2）接收数据，第一种方式，只接收：props:[‘name’]
第二种方式，限制类型：

props:{name:String}

第三种方式，限制类型、限制必要性、指定默认值：

props:{name:{type:String,//类型required:true,//必要性default：'肖战'//默认值 }}	

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

2.mixin混入

功能：可以把多个组件共用的配置提取成一个混入对象
使用方式：
第一步定义混合

{data(){....},methods:{.....}
}

第二步，使用混入
（1）全局混入：Vue.mixin(xxx)
（2）局部混入：mixins:[‘xxx’]
延申：
scoped样式
作用：让样式局部生效，防止冲突
写法：

<style scoped>.....</style>

3.组件化编码流程

组件化编码流程（通用）
1.实现静态组件，拆分组件（按功能点拆分），命名不要与html元素冲突，使用组件实现静态页面效果
2.展示动态数据：数据的类型及名称，数据保存在哪个文件，如一个组件使用，放在组件自身
3.交互，从绑定事件监听开始

4.webStorage

（1）存储内容大小一般支持5MB左右
（2）浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制
（3）相关API：

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

备注：
1】sessionStorage存储的内容会随着浏览器窗口关闭而消失
2】localStorage存储的内容，需要手动清除才会消失
3】xxxStorage.getItem(‘key’)，如果key对应的value获取不到，那么getItem的返回值为null
4]JSON.parse(null)的结果依然是null

5.组件自定义事件

（1）一种组件间通信方式，适用于子组件===>父组件
（2）使用场景：A是父组件，B是子组件，B给A传数据，那么在A中给B绑定自定义事件（事件的回调在A中）
（3）绑定自定义事件：
第一种方式，在父组件中：

<Demo @addTodo="test"/>或<Demo v-on:addTodo="test"/>

第二种方式，在父组件中：

<Demo ref="demo"/>
....
mounted(){this.$refs.demo.$on("addTodo",this.test)
}

若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法
（4）触发自定义事件：

this.$emit('addTodo',数据)

（5）解绑自定义事件：

this.$off('addTodo')

（6）组件上也可以绑定原生DOM事件，需要使用native修饰符
（7）注意：通过以下方式绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题

this.$refs.demo.$on("addTodo",回调或箭头函数)

6.全局事件总线

全局事件总线（GlobalEventBus）
（1）一种组件间通信的方式，使用于任意组件间通信
（2）安装全局事件总线

new Vue({render: h => h(App),beforeCreate(){Vue.prototype.$bus = this  //安装全局事件总线，$bus就是当前应用的vm}
}).$mount('#app')

（3）使用事件总线
1】接收数据，A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调在A组件自身

this.$bus.$on('deleteTodo',this.deleteTodo)

2】提供数据

this.$bus.$emit('deleteTodo',数据)

（4）最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件

7.消息订阅与发布

消息订阅与发布（pubsub）
（1）一种组件间通信的方式，适用于任意组件间通信
（2）使用步骤：
1】安装pubsub：npm i pubsub-js
2】引入：

import pubsub from 'pubsub-js'

3】接收数据，A组件想接收数据，则在A组件中订阅消息，订阅的回调在A组件自身

this.pubId =  pubsub.subscribe('deleteTodo',this.deleteTodo)  //订阅消息

4】提供信息

pubsub.publish('deleteTodo',数据)

5】最好在beforeDestroy钩子中，用pubsub.unsubscribe(this.pubId)取消订阅
延申：
nextTick
（1）语法：

this.$nextTick(回调函数)

（2）作用：在下一次DOM更新结束后执行其指定的回调函数
（3）什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行

二、使用步骤

1.引入库