一、ref（打标识）
前面提及到了标签属性：keys
这里将了解ref：打标识
正常布置脚手架并创建入口文件main.js引入组件
1. 可以给元素注册引用信息（获取真实DOM）
给一个按钮获取上方的dom的方法，方法中使用什么进行获取dom元素
是使用获取id方法给标签设置id，直接操作dom？ 错误❌
既然原生js可以给dom添加id，那么Vue也有类似的标识方法：ref
获取打了标识的dom：vc上面的$refs
//通过ref进行设置标识：title <h1 v-text="msg" ref="title"></h1> <button @click="showDOM">点我输出上方的dom元素</button> //通过vc下的refs进行获取通过ref标识的dom console.log(this.$refs.title);//真实DOM
2. 给子组件注册引用注册信息（获取组件实例对象）
注意：可以直接在子组件上通过ref标识，然后也可以通过当前vc的$refs进行获取到子组件实例对象
methods: { showDOM () { console.log(this);//获取当前的组件vc console.log(this.$refs.title);//真实DOM console.log(this.$refs.btn);//真实DOM console.log(this.$refs.school);//vc：school组件的实例对象 } },
二、配置项：props （接收数据配置项）
若想实现使用三次组件相同但是获取到的数据不同：就需要引入新的配置项
那么被复用能获取不同数据的组件就不能直接放入data数据代理
父组件中组件标签调用组件：传入数据
<Student name='李四' sex='女' :age='18'/>子组件本身：接收数据(props:接收)：存在三种接收数据方式
1. 数组接收数据
props:[ 'name','age','sex'] 名字必须对上，但顺序无所谓
如果想要接受的数据时处理后的数据就出现问题（因为直接传入的数据是字符串数据），想要直接使用数据传入，模板就无法解析就会报错 解决：可以对模板中数据前置转换：age*1+1
解决：在发送数据的部分数据名前面进行绑定 :age
因为v-bind绑定数据，引号里是运行表达式返回结果，所以会直接变成数值数据
2. 对象直接接收数据
props:{ name:String, age:Number, sex:String, }
获取到的数分别是字符串、数值、字符串
3. 接收同时对数据限制+默认值指定+必要性限制
props: { name: { type: String,//类型 required: true,//名字必须得传 }, age: { type: Number, default: 99,//如果不传年龄直接99 }, sex: { type: String, required: true, } }设置传递数据：
type：传递属性
required：数据必须传递
default：不传数据就会直接返回值默认值
传递进去通过浏览器展示之后不可以更改
<h2>学生年龄：{{age+1}}</h2> <button @click="change">尝试修改外部传进来年龄信息</button> //vue props:[ 'name','age','sex']//简单声名接收 //数据发生变化的方法 methods: { change () { this.age++ } }, //此时会报错：因为传入的数据不能发生变化
解决修改传入数据：
传递之后的数据优先级比自身设置的data数据优先级高
这时候传递进来的数据赋值给data中如果自己命名数据
可以将标签中读取的数据从获取数据名字转为自己data设置的数据名字
<h2>学生年龄：{{myAge+1}}</h2> <button @click="change">尝试修改外部传进来年龄信息</button> //vue data () { return { msg: '我爱学习', // name:'张武' //数据以外部传进来为主 myAge: this.age } }, props:[ 'name','age','sex']//简单声名接收 methods: { change () { this.myAge++ } },传入数据的名字不应该使用标签属性：例如key、ref
三、mixin混入
两个组件共享相同配置
1. 局部混入
1. 创建混入：mixin.js文件（使用分别暴露）
export const mixin = { methods: { showName() { alert(this.name) } },
2.引入混合：直接在使用的组件部分引入（分别暴露使用花括号形式引入）
根据混入文件中暴露部分名字
import {mixin} from './mixin'
3. 使用混合：新的配置项mixins （必须写成数组形式）写在组件中
mixins:[mixin]
注意：
组件配置内容比混入优先级高
生命周期钩子不以组件或者混合为主（都会执行：混合钩子靠前使用）
2. 全局混入
不在组件中引入混入，而是在main.js文件中引入
在main中引入的暴露配置
然后在main.js中使用api：Vue.mixin(name)使用混入
在main.js中引入并使用mixin中配置之后就会应用在全局：每一个vc，vm都会应用到
四、插件（增强Vue，可以接收参数）
本质对象，必须包含install，第一个参数是vue的构造函数
1.直接在src中编写：plugins.js
export default{ install() { console.log("@install"); }
2. 在main.js中引入
// 引入插件 import plugin from './plugins'
3. 在main.js中使用插件
Vue.use(plugins)
使用use的时候传入一个参数输出的是vue的构造函数
export default{ install(Vue) { console.log(Vue); }使用use时候传入多个参数插件都可以接收到
//main.js Vue.use(pluginsz,1,2,3) //plugins export default{ install(Vue, x, y,z) { console.log(x,y,z); }
直接在插件中配置多个配置项添加参数
- 配置plugs插件
- main文件中引入
- 使用api：Vue.use(插件名字)
export default{ install(Vue, x, y) { console.log(x,y); // 全局过滤器 Vue.filter("mySilice", 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: 1000, y:2000 } } }) // 给Vue原型上添加一个方法（vm和vc都可以使用） Vue.prototype.hello = ()=>(alert('hello')) } }
注意：可以使用很多插件并通过use使用插件
五、scroped，lang组件样式属性
1.scroped
子组件中的样式最终都会汇总 到一块：类名冲突（谁后在app中引入顺序就决定使用哪个组件中的样式）
//app组件中使用，后引入的决定组件样式 import School from './components/School' import Student from './components/Student';//school组件中 .demo { background-color: orange; } //student组件中 .demo { background-color: pink; }
解决：scroped（作用域：只在当前组件生效）
给外侧组件div生成特殊的标签属性
app组件不适用：app组件的样式是所有很多组件都会使用
文章来源：https://www.toymoban.com/news/detail-434447.html
<style scroped> .demo { background-color: orange; } </style>
2. lang
可以使用css编译或者less预编译，但是脚手架无法处理less，
解决：需要安装less-loader
less-loader最新版本应该匹配webpack的最新版本
<style lang="css">
.demo {
background-color: orange;
}
</style><style lang="less">
.demo {
background-color: blue;
.qwe {
font-size: 80px;
}
}
</style>解决：less-loader版本和webpack版本的差异
查看webpack版本和less-loader版本应该匹配文章来源地址https://www.toymoban.com/news/detail-434447.html
npm view webpack version npm view less-loader version
- webpack4匹配的是less-loader7
- webpack5匹配的 是less-loader8、9
到了这里，关于Vue（标签属性：ref、配置项：props、混入mixin、插件、样式属性：scroped）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
