一、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模板网!