vue2笔记6 ref，props，mixin，plugin

ref 子元素/组件引用

• 标记html标签时可以获取dom对象
• 标记组件标签时可以获取组件实例对象
• 通过id标记只能获取到组件最外层dom对象

代码语言：javascript复制

<template>
<!-- 使用ref标记元素 -->
<div ref='container'>
<template>
<script>
export default {
	...
	methods:{
		doSomething(){
			// 通过VueComponent.$ref获取标记的元素DOM对象/组件实例对象（vc）
			this.$ref.container
		}
	}
}
</script>

props 接收数据

接收父组件传入的数据，属性值不可修改

代码语言：javascript复制

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

// 限制类型

代码语言：javascript复制

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

// 限制类型，必要性，默认值

代码语言：javascript复制

props: {
	name: {
		type: String,
		required: true,
		default: 'noname'
	},
	...
}

mixin 混合

• 钩子函数（例如mounted） 优先执行混合中的钩子函数，然后执行组件中的钩子函数
• 其他属性/方法冲突时以组件声明为准

代码语言：javascript复制

const mixin = {
	methods:{
		doSomething(){};
	}
};
Vue.extend({
	...
	mixins: [mixin]
})
// 全局混合
Vue.mixin(mixin);

plugins 插件

代码语言：javascript复制

export default {
	// 参数：Vue构造函数
	install(Vue,config) {
		// 可以用Vue进行全局注册
		Vue.mixin(...)
		Vue.component(...)
		Vue.directive(...)
	}
}

// 引入插件

代码语言：javascript复制

// 自动调用plugins.install完成对应逻辑
Vue.use(plugins,config)

html dom plugins ref 插件

0 人点赞