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 + el-form 实现的多层循环表单验证
Nov 25 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
vue里使用create, mounted调用方法
Apr 26 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
CodeIgniter框架URL路由总结
2014/09/03 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
python 随机数生成的代码的详细分析
2011/05/15 Python
python二分查找算法的递归实现方法
2016/05/12 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
python psutil模块使用方法解析
2019/08/01 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
python中判断文件结束符的具体方法
2020/08/04 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
Python爬虫教程知识点总结
2020/10/19 Python
比利时买床:Beter Bed
2017/12/06 全球购物
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
大学生专科毕业生自我评价
2013/11/17 职场文书
小区门卫岗位职责
2013/12/31 职场文书
活动总结报告怎么写
2014/07/03 职场文书
活动总结格式
2014/08/30 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
同意迁入证明模板
2014/10/26 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python