【Vue】第九部分 Vue一些高级知识点

【Vue】第九部分 Vue一些高级知识点

---

---

9.1 ref属性

1. 作用：用来给元素或子组件注册引用信息（相当于是id的替代者）

2. 使用方式

​ 打标识：<h1 ref = "xxx"></h1>

​ 获取：this.$refs.xxx

3. 被应用在组件上获取的事件为该组件的实例对象（vc），被应用在html标签上获取的是真实的DOM元素

绑定在html标签上

<template>
  <div>
    <h1>欢迎来学习Vue！</h1>
    <h2>学校的名称:{{name}}</h2>
    <h2>学校地址:{{address}}</h2>
    <button @click="showEle" ref="title">点击我查看DOM元素</button>
  </div>
</template>

<script>
export default {
    data(){
        return{
            name:"清华大学",
            address:"北京"
        }
    },
    methods:{
        showEle(){
            console.log(this.$refs.title); //真实的DOM元素
        }
    }
};
</script>

绑定在组件上

<template>
  <div>
      <school ref="sch"></school>
      <br>
      <button @click="showvc">点击我查看school组件的实例对象</button>
  </div>
</template>

<script>
import school from "./components/school.vue"
export default {
    components:{school},
    methods:{
        showvc(){
            console.log(this.$refs.sch); //schoool组件的实例对象
        }
    }
}

</script>

9.2 props的配置项

作用：用于组件==接收==外部传过来的数据

有三种方式：

1. 只接收外部的数据

   props:['anme','age']

2. 限制数据的类型

   props:{name:String,age:Number}

3. 限制类型，限制必要性，指定默认值

     props:{
           name:{
               type:String,
               required:true
           },
           age:{
               type:Number,
               required:false,
               default: 99
           }
    }
   

注意：props是只读的，Vue底层会监测你对props的修改（浅层次监视），如果进行了修改，就会发出警告，若业务需求确实 需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

<template>
    <div class="wrapper">
         <h1>{{msg}}</h1>
         <h2>以下是我的个人信息</h2>
         <h3>学生姓名:{{name}}</h3>
         <h3>性别:{{sex}}</h3>
         <h3>年龄:{{modifyage+1}}</h3>
         <button @click="modifyage++">点击我年龄加1</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            msg:"大家好！我是一名学生",
            modifyage:this.age
            /* 
                为什么可以看的到age是因为props的优先级
                高，会先执行外部传进来的数据所以可以看得到
            */
        }
    },
    
    props:{
        name:{
            type:String,
            required:true
        },
        age:{
            type:Number,
            required:true,
            default: 99
        },
        sex:{
            type:String,
            required:true,
        }
    }
}
</script>

<style>
    .wrapper{
        background-color: antiquewhite;
        color: cadetblue;
    }
</style>

9.3 mixin（混入）

作用：可以把多个组件共用的配置提取成一个混入对象

在这里我创建一个mixin.js文件，以下是代码：

//将共同的方法和数据放在一起
export const mixin = {
    methods:{
        showinfo(){
            alert(this.name);
        }
    },
    data(){
        return {
            x:100,
            y:200
        }
    }
}

第一步导入：

在需要使用的组件中导入(局部导入)

import {mixin} from "../mixin.js";

如果要使用全局mixin，就需要导入到main.js文件里（全局导入）

第二步使用：

• 全局混入：Vue.mixin(xxx)
• 局部混入：mixins:['xxx']

全局mixin：

import Vue from "vue"
import App from "./App.vue"

Vue.config.productionTip = false   //阻止vue在生成时自动产生提示
import {mixin} from "./mixin"  //导入
Vue.mixin(mixin)  //使用
new Vue({
    el: '#app',
    data: {
        
    },
    render:h=>h(App)
})

局部mixin：

<template>
    <div>
         <h1 @click="showinfo">学校信息</h1>
         <h2>学校名称:{{name}}</h2>
         <h2>学校地址:{{address}}</h2>
    </div>
</template>

<script>
import { mixin} from "../mixin.js";  //导入
export default {
  props:["name","address"],
//  要写成数组的形式，即使一个也要写成数组的形式
  mixins:[mixin,mixin2]  //使用
}
</script>

9.4 Vue插件

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()

main.js

import Vue from "vue";
import App from "./App.vue";
//引入插件
import plugins from "./plugins";
Vue.config.productionTip = false; //关闭Vue的生产提示

//应用（使用）插件,可以在后面传参数
Vue.use(plugins, 1, 2, 3);
//创建vm
new Vue({
  el: "#app",
  render: (h) => h(App),
});

组件中使用

<template>
  <div>
    <h2>学校名称：{{ name | mySlice }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <button @click="test">点我测试</button>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      name: "清华大学",
      address: "北京",
    };
  },
  methods: {
    test() {
      console.log(this.name)
    },
  },
};
</script>

创建一个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("你好啊");
    };
  },
};

9.5 scoped样式

• 作用：让样式在局部生效，防止类名冲突。
• 写法：<style scoped>

9.6 nextTick（经常用）

1. 语法：this.$nextTick(回调函数)
2. 作用：在下一次 DOM 更新结束后执行其指定的回调。
3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

举个例子：比如获取焦点

---

总结

以上就是今天要讲的内容，本文一些Vue高级部分的知识点，希望对大家有所帮助！