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 相关文章推荐
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
Vue实现简单购物车功能
Dec 13 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue postcss-px2rem 自适应布局
May 15 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 5.0创建图形的巧妙方法
2010/10/12 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
php数据访问之增删改查操作
2016/05/09 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
Python控制多进程与多线程并发数总结
2016/10/26 Python
python图像常规操作
2017/11/11 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
Python函数参数操作详解
2018/08/03 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
文秘求职信范文
2014/04/10 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
活动总结报告怎么写
2014/07/03 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
股权投资协议书
2016/03/23 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python