Vue组件化(ref,props, mixin,.插件)详解


Posted in Vue.js onMay 15, 2022

1、ref属性

  • 被用来给元素或子组件注册引用信息(id的替代者)
  • 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
  • 使用方式:

打标识:<h1 ref="xxx">.....</h1><School ref="xxx"></School>

获取:this.$refs.xxx

Vue组件化(ref,props, mixin,.插件)详解

2、props配置项

如果我们需要子组件收到父组件传来的数据,就可以使用props配置项。

<Student name="李四" sex="女" :age="18"/>

App通过标签属性为Student传递数据,需要在Student中接收传递来的数据,有三种接收方式。

第一种方式(只接收):

props:[‘name',‘age',‘sex']

第二种方式(限制类型):

props: {
name: String,
age: Number,
sex: String
}

第三种方式(限制类型、限制必要性、指定默认值):

props: {
name: {
type: String, //name的类型是字符串
required: true, //name是必要的
},
age: {
type: Number,
default: 99 //默认值
},
sex: {
type: String,
required: true
}
}

必要性与默认值只设置一个即可。

<!--Student-->
<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>学生姓名:{{ name }}</h2>
    <h2>学生性别:{{ sex }}</h2>
    <h2>学生年龄:{{ myAge }}</h2>
    <button @click="updateAge">尝试修改收到的年龄</button>
  </div>
</template>
<!--App-->
<template>
	<div>
		<Student name="张三" sex="男"/>
    	<Student name="李四" sex="女" :age="18"/>
	</div>
</template>

Vue组件化(ref,props, mixin,.插件)详解

props总结

  • 功能:让组件接收外部传过来的数据
  • 传递数据:<Demo name="xxx"/>
  • 接收数据:

第一种方式(只接收):props:['name']

第二种方式(限制类型):props:{name:String}

第三种方式(限制类型、限制必要性、指定默认值):

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

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

3、mixin混入

混入用于抽离出多个组件的公共部分,包括函数和数据。在使用时候引入,能有效提高代码的复用性,混入本质上是一个对象

混入的使用有两种:

  • 局部混入,在需要引入混入的组件中引入即可,
  • 全局混入,即给所有的组件引入混入。

3.1、局部混入

我们定义混入,封装一个方法,以及携带一些数据。

定义一个mixin.js文件,编写混入以及提供外部引用的接口,即暴露。

export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
	mounted() {
		console.log('你好啊!')
	},
}
export const hunhe2 = {
	data() {
		return {
			x:100,
			y:200
		}
	},
}

接下来在SchoolStudent中引入混入

import {hunhe,hunhe2} from '../mixin'
mixins:[hunhe,hunhe2],

Vue组件化(ref,props, mixin,.插件)详解

3.2、全局混入

全局混入在main.js中配置

import {hunhe,hunhe2} from './mixin'
Vue.mixin(hunhe)
Vue.mixin(hunhe2)

mixin混入总结

  • 功能:可以把多个组件共用的配置提取成一个混入对象
  • 使用方式:

第一步定义混合:

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

第二步使用混入:

全局混入:Vue.mixin(xxx)
局部混入:mixins:['xxx']

4、插件

插件的应用与混入的应用差不多。

首先建立一个js文件,在里面建立插件,插件本质上也是一个对象。插件中要编写install函数,函数的第一个参数是Vue对象,也可以继续传递参数。

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('你好啊')
        }
    }
}

接着引入并使用插件即可,依然是在main.js里,这样就能全局的使用插件了。

//引入插件
import plugins from './plugins'
//应用(使用)插件  第一个参数名字与插件的名字一致
Vue.use(plugins,1,2,3)

插件总结

  • 功能:用于增强Vue
  • 本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。
  • 定义插件:
对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)
    // 2. 添加全局指令
    Vue.directive(....)
    // 3. 配置全局混入(合)
    Vue.mixin(....)
    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}

使用插件:Vue.use()

到此这篇关于Vue组件化(ref, props, mixin, 插件)详解的文章就介绍到这了,更多相关vue组件化内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!


Tags in this post...

Vue.js 相关文章推荐
详解Vue中的自定义指令
Dec 07 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue postcss-px2rem 自适应布局
May 15 #Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
vue使用watch监听属性变化
Apr 30 #Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
vue项目如何打包之项目打包优化(让打包的js文件变小)
关于vue-router-link选择样式设置
Apr 30 #Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 #Vue.js
You might like
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
数学系毕业生的自我评价
2014/01/10 职场文书
会计大学生职业生涯规划书范文
2014/01/13 职场文书
男女朋友协议书
2014/04/23 职场文书
大型活动组织方案
2014/05/10 职场文书
司法助理专业自荐书
2014/06/13 职场文书
解除同居协议书
2015/01/29 职场文书
公积金贷款承诺书
2015/04/30 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
单位更名证明
2015/06/18 职场文书
暂住证明怎么写
2015/06/19 职场文书
关于环保的广播稿
2015/12/17 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
python之json文件转xml文件案例讲解
2021/08/07 Python
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL
关于JavaScript轮播图的实现
2021/11/20 Javascript