1. mixin
混合就是复用配置,将Vue组件中共有的配置抽离出来,如果有组件需要使用配置,将混入引入就可以了
export const a = {
methods:{
showName(){
alert(this)
}
},
mounted(){
}
}
使用方法:先引入再注册
局部混合
import { a } from './mixin'
mixins:[a]
全局混合
Vue.mixin(a)
2. 插件plugins
用于增强Vue的一个对象,install的第一册参数是Vue 第二个以后的参数是插件使用者传递的数据。
在插件中可以定义过滤器,自定义Vue命令,混合等等。
定制插件之后 只需要使用Vue.use命令就可以对插件进行使用
export default {
install(Vue,x,y,z){
console.log(x,y,z)
//全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
//定义全局指令
Vue.directive('fbind',{
//指令与元素成功绑定时(一上来)
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
})
//定义混入
Vue.mixin({
data() {
return {
x:100,
y:200
}
},
})
//给Vue原型上添加一个方法(vm和vc就都能用了)
Vue.prototype.hello = ()=>{alert('你好啊')}
}
}
3.Scoped样式
用来组件和组件之间的样式冲突
4.不同组件中修改数据
如果不同组件中需要传递数据,
1. 可以先将修改数据的方法存储在APP上面,
2. 把方法通过props 传递给子组件,
3. 再由子组件进行方法调用