正文
Vue 使用技巧手记
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
watch监听
Vue监听属性有很多种写法，也有几个配置选项
使用配置项
new Vue({
watch:{
content:{
handler(old,newVal){
console.log(old,newVal)
}，
deep:true，
immediate:true
}
}
})
- deep：是一个布尔类型，告诉Vue以递归的方式监听嵌套对象内部值的变化。
- immediate：是一个布尔值类型，会立即触发而调用处理函数，而不用等到属性值第一次发生变化时才调用。
以上两个值默认值都为
false
，不需要的时候完全可以忽略。使用下面这种方法。
new Vue({
watch:{
content(old,newVal){
console.log(old,newVal)
}
}
})
或者还可以这样写
new Vue({
watch:{
content:"watchContent"
},
methods:{
watchContent(val,oldVal){
console.log(val,oldVal)
}
}
})
在使用
immediate
的时候，由于是自动触发，这样会导致旧值为
undefined
，这一点需要格外注意。
component 使用
在做项目中，可能会有一些情况，比如：弹窗里面可能有很多东西，这样的话需要写N个弹窗来支撑业务，否则就需要把所有的组件全部写在一个弹窗里面，但是这样会造成代码的混乱。
解决方案：
abc.vue
<template>
<div>
我是 abc
</div>
</template>
app.vue
<template>
<alert v-if="componentName">
<component :is=" 'q-'+componentName "/>
</alert>
</template>
<script>
export default {
data(){
return {
componentName:null
}
}
}
</script>
组件内model属性
Vue 2.2.0
推出
model
属性用来让使用者在组件中自定义触发
v-model
的触发时机，在没有推出该api之前默认使用
input
事件触发
v-model
更新。
官网解释：
允许一个自定义组件在使用
v-model
时定制
prop
和
event
。默认情况下，一个组件上的
v-model
会把
value
用作
prop
且把
input
用作
event
，但是一些输入类型比如单选框和复选框按钮可能想使用
value prop
来达到不同的目的。使用
model
选项可以回避这些情况产生的冲突。
实例：
children:
export default {
/**
* 自定义v-model
*/
model: {
// v-model默认绑定的值
prop: "modelList",
// 当组件使用v-model的使用使用change事件触发，原来没有更改的使用使用input事件触发
event: "change"
},
props:{
modelList:{
type:Array,
default:() => []
}
},
methods:{
changeModel(){
let newList = [1,2,3];
this.$emit("change", changeModel);
}
}
}
parent
<template>
<children v-model="newList"/>
</template>
export default {
data(){
return {
newList:[]
}
},
watch:{
newList:{
handler(old,newVal){
console.log(old,newVal)
}，
deep:true
}
}
}
大致使用就是这样，当
Children
组件遇到
this.$emit("change")
事件时候，会把接收到的参数，通过
v-model
实现数据绑定。
全局方法以及插件编写
在vue中拓展自己的插件供项目使用。
myGlobalMethod .js
export default {
install(Vue, options) {
Vue.myGlobalMethod = function () { // 1. 添加全局方法或属性，如: vue-custom-element
// 逻辑...
}
Vue.directive('my-directive', { // 2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
Vue.mixin({
created () { // 3. 通过全局 mixin方法添加一些组件选项，如: vuex
// 逻辑...
}
...
})
Vue.prototype.$myMethod = function (options) { // 4. 添加实例方法，通过把它们添加到 Vue.prototype 上实现
// 逻辑...
}
}
}
main.js
import Vue from "vue";
import myGlobalMethod from "./plugin/myGlobalMethod.js";
Vue.use(myGlobalMethod);
this.$myMethod();
函数式组件
函数式组件是无状态的，而且不能使用
this
，因此
render
函数获得了一个新的
context
上下文参数，包含
prop
，事件监听，字内容，插槽以及一些其他数据。
export default {
functional:true,
render(h,{props,children}){
return h(`h${props.livel}`,children)
}
}
可以使用模板的
functional
替换掉
functional:true
。
<template functional>
<div>{{props.message}}</div>
</template>
