插槽用法，ref，props，mixin混入，插件

refpropsmini混入插件插槽默认插槽具名插槽作用域插槽

ref

ref属性

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

2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）（可以获取组件实例的全部方法和属性）

3.使用方式：

打标识：<h1 ref="xxx">.....</h1>或 <School ref="xxx"></School>

获取：this.$refs.xxx

代码展示：

<template><div><h1 v-text="msg" ref="title"></h1><button ref="btn" @click="showDOM">点我输出上方的DOM元素</button><School ref="sch" /></div></template><script>//引入School组件import School from "./components/School";export default {name: "App",components: {School },data() {return {msg: "欢迎学习Vue！",};},methods: {showDOM() {console.log(this.$refs.title); //真实DOM元素console.log(this.$refs.btn); //真实DOM元素console.log(this.$refs.sch); //School组件的实例对象（vc）},},};</script>

props

props配置项

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

传递数据：<Demo name="xxx"/>

接收数据：

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

props:['name']

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

props:{name:'string'}

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

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

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

代码：

<template><div><h1>{{msg }}</h1><h2>学生姓名：{{name }}</h2><h2>学生性别：{{sex }}</h2><h2>学生年龄：{{myAge + 1 }}</h2><button @click="updateAge">尝试修改收到的年龄</button></div></template><script>export default {name: "Student",data() {console.log(this);return {msg: "我是一个尚硅谷的学生",myAge: this.age, //需要修改props数据需要复制一份};},methods: {updateAge() {this.myAge++; //然后在进行修改},},//简单声明接收// props:['name','age','sex']//接收的同时对数据进行类型限制/* props:{name:String,age:Number,sex:String} *///接收的同时对数据：进行类型限制+默认值的指定+必要性的限制props: {name: {type: String, //name的类型是字符串required: true, //name是必要的},age: {type: Number,default: 99, //默认值},sex: {type: String,required: true,},},};</script>

mini混入

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

使用方式：

第一步定义混合：

{data(){....},methods:{....}....}

第二步使用混入：

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

mixin.js

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

全局引人

main.js

//引入Vueimport Vue from 'vue'//引入Appimport App from './App.vue'import {hunhe,hunhe2} from './mixin'//关闭Vue的生产提示Vue.config.productionTip = falseVue.mixin(hunhe)Vue.mixin(hunhe2)//创建vmnew Vue({el:'#app',render: h => h(App)})

局部引入

组件中:

<template><div><h2 @click="showName">学生姓名：{{name }}</h2>//showName该方法定义在mixin混入中<h2>学生性别：{{sex }}</h2></div></template><script>// import {hunhe,hunhe2} from '../mixin'export default {name: "Student",data() {return {name: "张三",sex: "男",};},// mixins:[hunhe,hunhe2]};</script>

插件

功能：用于增强Vue本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。定义插件

对象.install = function (Vue, options) {// 1. 添加全局过滤器Vue.filter(....)// 2. 添加全局指令Vue.directive(....)// 3. 配置全局混入(合)Vue.mixin(....)// 4. 添加实例方法Vue.prototype.$myMethod = function () {...}Vue.prototype.$myProperty = xxxx}

使用插件：Vue.use()

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

main.js（引入插件）

//引入Vueimport Vue from "vue";//引入Appimport App from "./App.vue";//引入插件import plugins from "./plugins";//关闭Vue的生产提示Vue.config.productionTip = false;//应用（使用）插件Vue.use(plugins, 1, 2, 3);//创建vmnew Vue({el: "#app",render: (h) => h(App),});

组件中使用：

<template><div><h2>学校名称：{{name | mySlice }}</h2><h2>学校地址：{{address }}</h2><button @click="test">点我测试一个hello方法</button></div></template><script>export default {name: "School",data() {return {name: "尚硅谷atguigu",address: "北京",};},methods: {test() {this.hello();},},};</script>

插槽

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件

分类：默认插槽、具名插槽、作用域插槽

默认插槽

父组件中：

<Category><div>html结构1</div></Category>

子组件中：

<template><div><!-- 定义插槽 --><slot>插槽默认内容...</slot></div></template>

案例

App.vue：

<template><div class="container"><Category title="美食" ><img src="//01/16/srJlq0.jpg" alt=""></Category><Category title="游戏" ><ul><li v-for="(g,index) in games" :key="index">{{g}}</li></ul></Category><Category title="电影"><video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video></Category></div></template><script>import Category from './components/Category'export default {name:'App',components:{Category},data() {return {foods:['火锅','烧烤','小龙虾','牛排'],games:['红色警戒','穿越火线','劲舞团','超级玛丽'],films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']}},}</script><style scoped>.container{display: flex;justify-content: space-around;}</style>

Category.vue：

<template><div class="category"><h3>{{title}}分类</h3><!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） --><slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot></div></template><script>export default {name:'Category',props:['title']}</script><style scoped>.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}video{width: 100%;}img{width: 100%;}</style>

具名插槽

父组件中：

<Category><template slot="center"><div>html结构1</div></template><template v-slot:footer><div>html结构2</div></template></Category>

子组件中：

<template><div><!-- 定义插槽 --><slot name="center">插槽默认内容...</slot><slot name="footer">插槽默认内容...</slot></div></template>

案例

App.vue

<template><div class="container"><Category title="美食" ><img slot="center" src="//01/16/srJlq0.jpg" alt=""><a slot="footer" href="">更多美食</a></Category><Category title="游戏" ><ul slot="center"><li v-for="(g,index) in games" :key="index">{{g}}</li></ul><div class="foot" slot="footer"><a href="">单机游戏</a><a href="">网络游戏</a></div></Category><Category title="电影"><video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video><template v-slot:footer><div class="foot"><a href="">经典</a><a href="">热门</a><a href="">推荐</a></div><h4>欢迎前来观影</h4></template></Category></div></template><script>import Category from './components/Category'export default {name:'App',components:{Category},data() {return {foods:['火锅','烧烤','小龙虾','牛排'],games:['红色警戒','穿越火线','劲舞团','超级玛丽'],films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']}},}</script><style scoped>.container,.foot{display: flex;justify-content: space-around;}h4{text-align: center;}</style>

Category.vue

<template><div class="category"><h3>{{title}}分类</h3><!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） --><slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot><slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</slot></div></template><script>export default {name:'Category',props:['title']}</script><style scoped>.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}video{width: 100%;}img{width: 100%;}</style>

作用域插槽

具体编码：

父组件中：

<Category><template scope="scopeData"><!-- 生成的是ul列表 --><ul><li v-for="g in scopeData.games" :key="g">{{g}}</li></ul></template></Category><Category><template slot-scope="scopeData"><!-- 生成的是h4标题 --><h4 v-for="g in scopeData.games" :key="g">{{g}}</h4></template></Category>

子组件中：

<template><div><slot :games="games"></slot> //game传递给该插槽的使用者</div></template><script>export default {name:'Category',props:['title'],//数据在子组件自身data() {return {games:['红色警戒','穿越火线','劲舞团','超级玛丽']}},}</script>

案例

App.vue

<template><div class="container"><Category title="游戏"><template scope="atguigu"><ul><li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li></ul><h4>atguigu.msg</h4></template></Category><Category title="游戏"><template scope="{games}"><ol><li style="color:red" v-for="(g,index) in games" :key="index">{{g}}</li></ol></template></Category><Category title="游戏"><template slot-scope="{games}"><h4 v-for="(g,index) in games" :key="index">{{g}}</h4></template></Category></div></template><script>import Category from './components/Category'export default {name:'App',components:{Category},}</script><style scoped>.container,.foot{display: flex;justify-content: space-around;}h4{text-align: center;}</style>

Category.vue

<template><div class="category"><h3>{{title}}分类</h3><slot :games="games" msg="hello">我是默认的一些内容</slot></div></template><script>export default {name:'Category',props:['title'],data() {return {games:['红色警戒','穿越火线','劲舞团','超级玛丽'],}},}</script><style scoped>.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}video{width: 100%;}img{width: 100%;}</style>1