Vue使用脚手架（ref、props、mixin、插件、scoped）（七）

系列文章目录

第一章：Vue基础知识笔记（模板语法、数据绑定、事件处理、计算属性）（一）
第二章：Vue基础知识（计算属性、监视属性、computed和watch之间的区别、绑定样式）（二）
第三章：Vue基础知识（条件渲染、列表渲染、收集表单数据、过滤器）（三）
第四章：Vue基础知识（内置指令、自定义指令、Vue生命周期）（四）
第五章：Vue基础知识之组件机制（非单文件组件、单文件组件）（五）
第六章：Vue创建脚手架（六）
第八章：Vue组件通信（组件的自定义事件、全局事件总线、消息订阅与发布、插槽、props）（八）
第九章：Vue使用脚手架（nextTick、Vue封装的过度与动画、vue脚手架配置代理）（九）
第十章：Vuex（十）
第十一章：vue-router（基本使用、路由重定向、多级路由、路由命名、路由的query和params参数、路由的props配置）（十一）
第十二章：vue-router（路由的两种工作模式、router-link的replace属性、编程式路由导航、缓存路由组件keep-alive、路由守卫【全局路由守卫、独享路由守卫、组件内路由守卫】）（十二）
第十三章：Vue组件通信二&数据同步（v-model、属性修饰符.sync、$attrs与$listeners、refs.$children与refs.$parent、provide与inject ）（十三）

---

---

一、ref属性

• 被用来给元素或子组件注册引用信息（id的替代者）
• 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
• 使用方式：
  • 打标识：<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配置项（父子组件间通信）

• 功能： 让组件接收外部传过来的数据(可用于父子间通信)

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

• 接收数据：

  • 第一种方式（只接收）：props:['name']
  • 第二种方式（限制类型）：props:{name:String}
  • 第三种方式（限制类型、限制必要性、指定默认值、自定义校验规则）：

        props:{
	         name:{
	         type:Number, //类型
	         required:true, //必要性
	         default:100, //默认值
	         validator(value) {
	            /* if(value>50){
	              return true;
	            }else{
	              return false;
	            } */
             return value > 50;
          	 }
	       }
        }

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

父组件给子组件传递数据案例（代码片段）：

App.vue

<template>
	<div>
	//数值类型需要使用v-bind进行传递，否则传递过去的会为String类型
		<Student name="李四" sex="女" :age="18"/>
	</div>
</template>

<script>
	import Student from './components/Student'

	export default {
		name:'App',
		components:{Student}
	}
</script>

Student.vue

<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,
    };
  },
  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>

运行结果：

上述案例实现了，父组件给子组件传递数据，那么是否可以利用props实现子组件给父组件传递数据呢？
那么就让父组件给子组件传递一个函数，让子组件在内部调用父组件传递过来的函数，通过给函数传递实参，将子组件的数据传递给父组件。
子组件给父组件传递数据案例（代码片段）：
App.vue

<template>
	<div class="app">
		<!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
		<School :getSchoolName="getSchoolName"/>
	</div>
</template>

<script>
	import Student from './components/Student'

	export default {
		name:'App',
		components:{Student},
		data() {
			return {
				msg:'你好啊！',
				studentName:''
			}
		},
		methods: {
			getSchoolName(name){
				console.log('App收到了学校名：',name)
			},
		},
	}
</script>

School.vue

<template>
  <div class="school">
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <button @click="sendSchoolName">把学校名给App</button>
  </div>
</template>

<script>
export default {
  name: "School",
  props: ["getSchoolName"],
  data() {
    return {
      name: "你猜",
      address: "你猜",
    };
  },
  methods: {
    sendSchoolName() {
      this.getSchoolName(this.name);
    },
  },
};
</script>

运行结果：

三、mixin（混入）

在开发中，我们会定义多个组件，而组件中避免不了出现属性和方法重复的情况，造成代码冗余；我们可以把重复的属性和方法定义在mixin中，组件可以引入mixin，把这个mixin中的属性和方法当做基础结构。

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

• 使用方式：
  第一步定义混入（共同属性和方法）：

  	export const hunhe{
  		    data(){....},
  		    methods:{....}
  		    ....
  	}
  

  第二步使用混入：
  全局混入： Vue.mixin(xxx)​
  局部混入： mixins:['xxx']

main.js中全局使用

import {mixin1,mixin2} from './mixin'
	Vue.mixin(mixin1)
	Vue.mixin(mixin2)

其他组件中使用：

<script>
//引入
import {mixin1,mixin2} from './mixin'

export default {
  data() {...},
  mixins: [mixin1, mixin2],
};
</script>

注意：

1.数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

2.同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

3.值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲 突时，取组件对象的键值对。

案例（代码片段）：
App.vue

<template>
	<div>
		<School/>
		<hr>
		<Student/>
	</div>
</template>

<script>
	import School from './components/School'
	import Student from './components/Student'

	export default {
		name:'App',
		components:{School,Student}
	}
</script>

mixin.js

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

Student.vue

<template>
  <div>
    <h2 @click="showName">学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    {{ x }}{{ y }}
  </div>
</template>

<script>
import { mixin1, mixin2 } from "../mixin";

export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      sex: "男",
    };
  },
  mixins: [mixin1, mixin2],
};
</script>

School.vue

<template>
  <div>
    <h2 @click="showName">学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
    {{ x }}{{ y }}
  </div>
</template>

<script>
//引入
import { mixin1, mixin2 } from "../mixin";

export default {
  name: "School",
  data() {
    return {
      name: "你猜",
      address: "你猜",
      x: 666,
    };
  },
  mixins: [mixin1, mixin2],
};
</script>

运行结果：

使用共同的点击事件

四、插件

插件通常用来为 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()

案例（代码片段）：

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 中引入代码

//引入插件
import plugins from './plugins'
//应用（使用）插件
Vue.use(plugins,1,2,3)

School.vue 组件使用插件

<template>
  <div>
    <h2>学校名称：{{ name | mySlice }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <button @click="test">点我测试一个hello方法</button>
    <input type="text" v-fbind:value="name" />
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      name: "你猜",
      address: "你猜",
    };
  },
  methods: {
    test() {
      this.hello();
    },
  },
};
</script>

运行结果：

引入的全局方法生效

五、scoped样式

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