600字范文 > VUE学习(十三) ref属性 props配置项 minix混入自定义插件 scoped样式

VUE学习(十三) ref属性 props配置项 minix混入自定义插件 scoped样式

时间：2020-07-19 04:28:08

VUE学习(十三)、ref属性、props配置项、minix混入、自定义插件、scoped样式

一、ref属性

<template><div><h1 v-text="msg" ref="title"></h1><button ref="btn" @click="showDOM">点我输出上方的DOM元素</button><School ref="sch"/></div></template><script>//引入School组件import School from './components/School'export default {name:'App',components:{School},data() {return {msg:'欢迎学习Vue！'}},methods: {showDOM(){console.log(this.$refs.title) //真实DOM元素console.log(this.$refs.btn) //真实DOM元素console.log(this.$refs.sch) //School组件的实例对象（vc）}},}</script>

二、props配置项

props传入的值尽量在传入后就不要修改了，需要修改的话按照特定方法修改（下有）

如果修改了内存地址（直接变为一个新的对象）则是直接改变 vue 能检测到并且报错，如果修改该的是对象里面的某些数据，对象内存地址没有发生改变则vue 不会进行监测

配置：

<template><div><h1>{{msg}}</h1><h2>学生姓名：{{name}}</h2><h2>学生性别：{{sex}}</h2><h2>学生年龄：{{myAge+1}}</h2><button @click="updateAge">尝试修改收到的年龄</button></div></template><script>export default {name:'Student',data() {console.log(this)return {msg:'我是一个xxx大学的学生',myAge:this.age //props配置项的数据不能轻易修改，如果真的想修改就用此方法}},methods: {updateAge(){this.myAge++}},//简单声明接收// props:['name','age','sex'] //接收的同时对数据进行类型限制/* props:{name:String,age:Number,sex:String} */// required和default不能同时存在//接收的同时对数据：进行类型限制+默认值的指定+必要性的限制props:{name:{type:String, //name的类型是字符串required:true, //name是必要的},age:{type:Number,default:99 //默认值},sex:{type:String,required:true}}}</script>

使用

<template><div><Student name="李四" sex="女" :age="18" /></div></template><script>import Student from "./components/Student";export default {name: "App",components: { Student }};</script>

props配置项
功能：让组件接收外部传过来的数据
传递数据：<Demo name="xxx"/>
接收数据：
第一种方式（只接收）：
props:['name']
第二种方式（限制类型）：
props:{name:String}
第三种方式（限制类型、限制必要性、指定默认值）：
props:{name:{type:String, //类型required:true, //必要性default:'老王' //默认值}}
备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

三、mixin混入（混合）

1、功能：
可以把多个组件共用的配置提取成一个混入对象
2、使用方式：
第一步定义混合：
{data(){....},methods:{....}....}
第二步使用混入：
全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']

mixin.js文件

/* 多个组件公有的配置 */export const hunhe = {methods: {showName(){alert(this.name)}},mounted() {console.log('你好啊！')},}export const hunhe2 = {data() {return {x:100,y:200}},}

局部使用（单组件）

<template><div><h2 @click="showName">学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2></div></template><script>//引入一个hunhe（局部）// import {hunhe,hunhe2} from '../mixin'export default {name:'School',data() {return {name:'xxx大学',address:'北京',x:666 //数据和混入整合时以当前数据为主，但是生命周期钩子是都要，并且混入里面的钩子先执行}},// 使用一个hunhe（局部）// mixins:[hunhe,hunhe2],}</script>

全局（main.js中）

//引入Vueimport Vue from 'vue'//引入Appimport App from './App.vue'// 全局混入import {hunhe,hunhe2} from './mixin'//关闭Vue的生产提示Vue.config.productionTip = false// 全局混入使用Vue.mixin(hunhe)Vue.mixin(hunhe2)//创建vmnew Vue({el:'#app',render: h => h(App)})

四、自定义插件

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

自定义插件文件pbugin.js

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

使用

<template><div><h2>学生姓名：{{name}}</h2><h2>学生性别：{{sex}}</h2><input type="text" v-fbind:value="name"></div></template><script>export default {name:'Student',data() {return {name:'张三',sex:'男'}},}</script>

<template><div><h2>学校名称：{{name | mySlice}}</h2><h2>学校地址：{{address}}</h2><button @click="test">点我测试一个hello方法</button></div></template><script>export default {name:'School',data() {return {name:'xxx大学atguigu',address:'北京',}},methods: {test(){this.hello()}},}</script>