一、在vue有两个选项,provide和inject,这两个选项是一起使用的,使用方法如下:
// 假如我有三个自定义组件像以下这样使用
// 在实际中不要像我这样给组件命名
<test-component1>
<test-component1>
<test-component1>
</test-componsent1>
</test-componsent1>
</test-componsent1>
// 在最外层的TestComponent1组件中我添加一个provide选项
export default {
name:"TestComponent1",
data(){},
provide:function(){
return {
name:"testName",
age:21,
}
}
}
// 那么我可以直接在TestComponent2和TestComponent3组件中使用inject直接拿到
export default {
name:"",
data(){},
// 注意这里不用像props那样需要传给子组件
// 只需要在父组件中使用provide即可
// 这样之后子孙组件可以直接使用inject来得到那些数据
// 不管隔了多少代
inject:["name","age"],
mounted(){
console.log(this.name); // testName
console.log(this.age); // 21
}
}
二、mixins选项,用法如下
// 这是xiao.js文件 内容如下 以下是完成内容
export default {
watch:{},
mounted(){
console.log("mixin test");
}
}
// 这是在另外一个文件 test.vue
<script>
// 导入
import mixin from "@/layout/xiao.js";
export default {
name:"Test"
mixins:[mixin],
mounted(){
console.log("index test");
},
// 想上面那样学了之后 在这个组件挂载后会打印两次
// 分别是
// mixin test
// index test
// 其他的选项都能像上面那样写 这里只是举例这样写的
}
</script>
三、watch,简单的使用方法如下:
// test.vue
<script>
export default {
name:"Test",
data(){
return {
num:1,
obj:{
name:"xiao",
age:21,
}
}
},
watch:{
"num":function(newValue,oldValue){
// 当data中num数据被改变时才执行
},
"obj":{
handle(newValue,oldValue){
// 当对象obj里面的属性被改变时执行
// 注意 如果不设置deep:true是不会监听的
// 不想设置deep的话可以分开监听,如下样式
// "obj.name":function(newValue,oldValue){}
// "obj.age":function(newValue,oldValeu){}
// 这样太麻烦了,这里数据较少看不出,假如有很多了,
// 如果用到了ajax、axios等这些还有不确定因素怎么办??
},
deep:true, // 这样设置就可以进行深度监听了
// watch是在加载完成后如果数据发生变化了 才会触发
// 如果想要一进来就执行 可以设置immediate为true来实现
immediate:true,
}
}
}
</script>
四、computed,使用方法如下
// 都说到这了 我说一下我个人对watch、computed、methods的大致区别
// watch 主要是用于监听数据的变化 主要是在必要的时候用到 比如自适应等
// computed 主要是计算的,也是在要拿取数据需要计算的时候建议使用(下面详细说明)
// methods 主要就是写一些在开发中需要用到的方法,不管数据变没变都会从新计算
// test.vue
<template>
<div>
<p>{{ allName }}</p>
</div>
</template>
<script>
export default {
// 个人习惯加name了 其实加不加都一样 加了更好
name:"Test",
data(){
return {
firstName:"xiao",
lastName:"pang",
}
},
computed:{
allName(){
// computed里面的方法可以像data里面的数据一样直接使用
// 在使用时可以不加括号也可以加
// computed中如果firstName和lastName都不发生变化,name系统就不会再次计算了
// 比较节约性能,这里数据少计算量小看不出来
return this.firstName + this.lastName;
},
firstName:{
// 在computed中存在get和set方法
// 也能达到监听的效果 不过相对watch来说watch更好一点
get(){},
set(newValue){},
}
},
// 有人会说了我methods同样可以做到啊,为啥不用他们呢
// 主要就是只要你用来我methods里面的方法,不管变没变都会重新计算
}
</script>
五、filter,用法如下
// filter:过滤
// test.vue
<template>
<div>
<p>{{ moneny | newMoneny }}</p>
// 也可以这样使用 方法上上面一样
<p :class="pClass | newClass"></p>
</div>
</template>
<script>
export default {
name:"Test",
data(){
return {
moneny: 2,
pClass:"test",
}
},
filter:{
// 在很多时候我们想格式化一下显示的内容
// 就像上面一样 本来只会输出 2 的,经过下面的处理会显示出:$2.00
newMoneny(value){
// 这里的value就是对应的money
// 注意filter可以接连使用的,如:{{ moneny | moneny1 | moneny2 }}
// 每一次的value就是对应前面新更新的内容
return "$" + value.toFixed(2);
// toFixed是原生的方法 四舍五入保留小数后几位 可以接收的参数是0-20位
// 也可能是21位,有点忘记了,
// 反正toFixed(num), num 是几就保留几位,不够就加0补,多了就四舍五入
}
}
}
</script>
六、metaInfo,这是一个插件,下面介绍的是在vsCode编辑器里面的使用方法,如下:
// 注意:在vue项目中,meatInfo如果使用,也是一般在app.vue文件中使用(入口文件)
// 先下载: npm install --save vue-meat-info 可以不加 --save
// 在main.js文件里面挂载,分两步如下:
// 1、引入 import metaInfo from "vue-meta.info"
// 2、挂载 Vue.use(metaInfo);
// 这样就可以直接使用了
//app.vue
<script>
import
export default {
name:"app",
// 设置的内容和.html文件里面head标签里面的那些标签设置的差不多
// 简单的移动端阻止缩放也可以在这里设置哦,
// 这样只是换了一种写法,其他的都没变,
metaInfo:{
title: "设置标题",
meta:[{
name:"",
content:"",
}],
link:[{
rel:"",
href:"",
}],
}
}
</script>