Vue高级

一 ref属性

被用来给元素或子组件注册引用信息（id的替代者）

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

使用方式：

打标识：

......

或

获取：this.$refs.xxx

<template>
  <div>
    <h1 v-text="msg" ref="title"></h1>
    <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
    <HelloWorld ref="sch" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: { HelloWorld },
  data() {
    return {
      msg: "lqz",
    };
  },
  methods: {
    showDOM() {
      console.log(this.$refs.title); //真实DOM元素
      console.log(this.$refs.btn); //真实DOM元素
      console.log(this.$refs.sch); //School组件的实例对象（vc）
    },
  },
};
</script>

二 props配置项

功能：让组件接收外部传过来的数据

传递数据：

接收数据：

第一种方式（只接收）：props:['name']

第二种方式（限制类型）：props:{name:String}

第三种方式（限制类型、限制必要性、指定默认值）：

props:{
	name:{
	type:String, //类型
	required:true, //必要性
	default:'老王' //默认值
	}
}

三 mixin(混入)

mixin(混入)

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

使用方式：

第一步定义混入：

export const hunhe = {
  methods: {
    showName() {
      alert(this.name);
    },
  },
  mounted() {
    console.log("你好啊！");
  },
};
export const hunhe2 = {
  data() {
    return {
      x: 100,
      y: 200,
    };
  },
};

第二步：使用混入（全局）

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
import {hunhe,hunhe2} from './mixin'
//关闭Vue的生产提示
Vue.config.productionTip = false

Vue.mixin(hunhe)
Vue.mixin(hunhe2)


//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})

第三步：使用混入（局部）

<template>
  <div>

  </div>
</template>

<script>
import {hunhe,hunhe2} from '../mixin'

export default {
  name: "App",
  data() {
    return {
      name: "lqz",
    };
  },
  mixins:[hunhe,hunhe2]
};
</script>

四 插件

1. 功能：用于增强Vue

2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

3. 定义插件：plugins/index.js

   import Vue from "vue";
   
   export default {
       install(a) {
           console.log('执行了插件', a)
           // 定义指令
           //定义全局指令：跟v-bind一样，获取焦点
           Vue.directive("fbind", {
               //指令与元素成功绑定时（一上来）
               bind(element, binding) {
                   element.value = binding.value;
               },
               //指令所在元素被插入页面时
               inserted(element, binding) {
                   element.focus();
               },
               //指令所在的模板被重新解析时
               update(element, binding) {
                   element.value = binding.value;
               },
           });
   
           //定义混入，所有vc和vm上都有name和lqz
           Vue.mixin({
               data() {
                   return {
                       name: '彭于晏',
                       age: 19,
                   };
               },
           });
   
           // 原型上放方法，所有vc和vm都可以用hello
           Vue.prototype.hello = () => {
               alert("你好啊");
           };
   
   
       }
   }

4. 使用插件：main.js中

   import plugins from './plugins'
   
   Vue.use(plugins, 1, 2, 3);

5. App.vue中

<template>
  <div>
  {{name}}
    <input type="text" v-fbind:value="v">
    <br>
    <button @click="hello">点我</button>
  </div>
</template>

<script>

export default {
  name: "App",
  data() {
    return {
      v:'xxx'
    };
  },
};
</script>

五 scoped样式

1. 作用：让样式在局部生效，防止冲突。
2. 写法：<style scoped>

六 插槽

1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件
2. 分类：默认插槽、具名插槽
3. 使用方式：

<template v-slot:footer>
    <div>html结构2</div>
</template>

七 Elementui的使用

Element - The world's most popular Vue UI framework