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 相关文章推荐
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
Vue router安装及使用方法解析
Dec 02 Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
Vue操作Storage本地化存储
Apr 29 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
用文本文件制作留言板提示(下)
2006/10/09 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
vue实现简单图片上传
2020/06/30 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
python 自动提交和抓取网页
2009/07/13 Python
给Python入门者的一些编程建议
2015/06/15 Python
python读写csv文件实例代码
2019/07/05 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python批量解压zip文件的方法
2019/08/20 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
如何使用python进行pdf文件分割
2019/11/11 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
四年的个人工作自我评价
2013/12/10 职场文书
趣味运动会活动方案
2014/02/12 职场文书
毕业生面试求职信
2014/06/23 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android