一 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 = falseVue.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和lqzVue.mixin({data() {return {name: '彭于晏',age: 19,};},});// 原型上放方法，所有vc和vm都可以用helloVue.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