Vue组件操作

文章介绍了Vue.js中的Mixins机制,用于复用组件配置,以及插件的使用,包括如何增强Vue功能,如定义全局过滤器、指令和混入。同时,提到了Scoped样式解决组件间样式冲突的问题,以及在不同组件间如何通过方法传递来修改数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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. 再由子组件进行方法调用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值