-
Vue使用脚手架（ref、props、mixin、插件、scoped）（七）
系列文章目录
第一章：Vue基础知识笔记（模板语法、数据绑定、事件处理、计算属性）（一）
第二章：Vue基础知识（计算属性、监视属性、computed和watch之间的区别、绑定样式）（二）
第三章：Vue基础知识（条件渲染、列表渲染、收集表单数据、过滤器）（三）
第四章：Vue基础知识（内置指令、自定义指令、Vue生命周期）（四）
第五章：Vue基础知识之组件机制（非单文件组件、单文件组件）（五）
第六章：Vue创建脚手架（六）
第八章：Vue组件通信（组件的自定义事件、全局事件总线、消息订阅与发布、插槽、props）（八）
第九章：Vue使用脚手架（nextTick、Vue封装的过度与动画、vue脚手架配置代理）（九）
第十章：Vuex（十）
第十一章：vue-router（基本使用、路由重定向、多级路由、路由命名、路由的query和params参数、路由的props配置）（十一）
第十二章：vue-router（路由的两种工作模式、router-link的replace属性、编程式路由导航、缓存路由组件keep-alive、路由守卫【全局路由守卫、独享路由守卫、组件内路由守卫】）（十二）
第十三章：Vue组件通信二&数据同步（v-model、属性修饰符.sync、 a t t r s 与 attrs与 attrs与listeners、refs. c h i l d r e n 与 r e f s . children与refs. children与refs.parent、provide与inject ）（十三）
一、ref属性
- 被用来给元素或子组件注册引用信息（
id的替代者） - 应用在
html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc） - 使用方式：
- 打标识：
.....
或 - 获取：
this.$refs.xxx
- 打标识：
案例（代码片段）：
<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
运行结果：
二、props配置项（父子组件间通信）
-
功能： 让组件接收外部传过来的数据(可用于父子间通信)
-
传递数据：
-
接收数据：
- 第一种方式（只接收）：
props:['name'] - 第二种方式（限制类型）：
props:{name:String} - 第三种方式（限制类型、限制必要性、指定默认值、自定义校验规则）：
- 第一种方式（只接收）：
props:{ name:{ type:Number, //类型 required:true, //必要性 default:100, //默认值 validator(value) { /* if(value>50){ return true; }else{ return false; } */ return value > 50; } } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
备注：
props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。父组件给子组件传递数据案例（代码片段）：
App.vue
<template> <div> //数值类型需要使用v-bind进行传递，否则传递过去的会为String类型 <Student name="李四" sex="女" :age="18"/> </div> </template> <script> import Student from './components/Student' export default { name:'App', components:{Student} } </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
Student.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: "我是一个学生", myAge: this.age, }; }, methods: { updateAge() { this.myAge++; }, }, //简单声明接收 // 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, }, }, }; </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
运行结果：
上述案例实现了，父组件给子组件传递数据，那么是否可以利用props实现子组件给父组件传递数据呢？
那么就让父组件给子组件传递一个函数，让子组件在内部调用父组件传递过来的函数，通过给函数传递实参，将子组件的数据传递给父组件。
子组件给父组件传递数据案例（代码片段）：
App.vue<template> <div class="app"> <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 --> <School :getSchoolName="getSchoolName"/> </div> </template> <script> import Student from './components/Student' export default { name:'App', components:{Student}, data() { return { msg:'你好啊！', studentName:'' } }, methods: { getSchoolName(name){ console.log('App收到了学校名：',name) }, }, } </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
School.vue
<template> <div class="school"> <h2>学校名称：{{ name }}</h2> <h2>学校地址：{{ address }}</h2> <button @click="sendSchoolName">把学校名给App</button> </div> </template> <script> export default { name: "School", props: ["getSchoolName"], data() { return { name: "你猜", address: "你猜", }; }, methods: { sendSchoolName() { this.getSchoolName(this.name); }, }, }; </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
运行结果：
三、mixin（混入）
在开发中，我们会定义多个组件，而组件中避免不了出现属性和方法重复的情况，造成代码冗余；我们可以
把重复的属性和方法定义在mixin中，组件可以引入mixin，把这个mixin中的属性和方法当做基础结构。-
功能： 可以把
多个组件共用的配置提取成一个混入对象 -
使用方式：
第一步定义混入（共同属性和方法）：export const hunhe{ data(){....}, methods:{....} .... }- 1
- 2
- 3
- 4
- 5
第二步使用混入：
全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']
main.js中全局使用
import {mixin1,mixin2} from './mixin' Vue.mixin(mixin1) Vue.mixin(mixin2)- 1
- 2
- 3
其他组件中使用：
<script> //引入 import {mixin1,mixin2} from './mixin' export default { data() {...}, mixins: [mixin1, mixin2], }; </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
注意：
1.
数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。2.同名钩子函数将合并为一个数组，因此都将被调用。另外，
混入对象的钩子将在组件自身钩子之前调用。3.值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。
两个对象键名冲 突时，取组件对象的键值对。案例（代码片段）：
App.vue<template> <div> <School/> <hr> <Student/> </div> </template> <script> import School from './components/School' import Student from './components/Student' export default { name:'App', components:{School,Student} } </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
mixin.js
export const mixin1 = { methods: { showName() { alert(this.name) } }, mounted() { console.log('你好啊！') }, } export const mixin2 = { data() { return { x: 100, y: 200 } }, }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
Student.vue
<template> <div> <h2 @click="showName">学生姓名：{{ name }}</h2> <h2>学生性别：{{ sex }}</h2> {{ x }}{{ y }} </div> </template> <script> import { mixin1, mixin2 } from "../mixin"; export default { name: "Student", data() { return { name: "张三", sex: "男", }; }, mixins: [mixin1, mixin2], }; </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
School.vue
<template> <div> <h2 @click="showName">学校名称：{{ name }}</h2> <h2>学校地址：{{ address }}</h2> {{ x }}{{ y }} </div> </template> <script> //引入 import { mixin1, mixin2 } from "../mixin"; export default { name: "School", data() { return { name: "你猜", address: "你猜", x: 666, }; }, mixins: [mixin1, mixin2], }; </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
运行结果：
使用共同的点击事件
四、插件
插件通常用来为 Vue 添加全局功能。
-
功能： 用于增强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 }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
-
使用插件：
Vue.use()
案例（代码片段）：
plugins.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('你好啊')} } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
main.js 中引入代码
//引入插件 import plugins from './plugins' //应用（使用）插件 Vue.use(plugins,1,2,3)- 1
- 2
- 3
- 4
School.vue 组件使用插件
<template> <div> <h2>学校名称：{{ name | mySlice }}</h2> <h2>学校地址：{{ address }}</h2> <button @click="test">点我测试一个hello方法</button> <input type="text" v-fbind:value="name" /> </div> </template> <script> export default { name: "School", data() { return { name: "你猜", address: "你猜", }; }, methods: { test() { this.hello(); }, }, }; </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
运行结果：
引入的全局方法生效
五、scoped样式
- 作用：让样式在局部生效，防止冲突。
- 写法：
- 被用来给元素或子组件注册引用信息（
-
相关阅读:
机器学习入门（1）
【量化小技巧】Python通过统计数据来进行过滤tushare涨停Dataframe，df.loc，或许有些启示与帮助
kafka是啥？虽然很难学，但是实验入门很简单
数组不可以复制，导致了数组同样不支持传参
Stream流常见操作
云计算基础技术
TrackBar控件
设备树_基础知识
什么是多进程-多线程-多协程 ---- 文件系统
什么是供应商管理？为什么它很重要？
- 原文地址：https://blog.csdn.net/qq_48617322/article/details/126549029
