目录
vue组件中的ref
props传值并修改
混合（子组件重复部分利用混合可以减少代码量的重复编写）
知识点拓展：
第一部：vue组件中的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></school>
</div>
</template>
<script type="text/javascript">
//引入school组件
import school from '.components/school.vue'
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组件的实例对象
}
}
}
</script>
第二部分：props传值并修改
续：
知识点讲解：
功能：让组件接收外部传过来的数据
（1）传递数据：
<Demo name="xxx">
（2）接收数据：
第一种方式（只接收）
props:['name','age' ]
第二种方式（限制类型）：
props:{
name:Number
}
第三种方式（限制类型，限制必要性，指定默认值）
props：{
name：{
type：String，//数值类型
required：true，//必须传值
default：‘l老王’//默认值
}
}
被用props是只读的，vue底层会监测你对props，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份
，然后修改data中的数据。
第三部分：混合（子组件重复部分利用混合可以减少代码量的重复编写）
混合部分的源代码minxin.js
源代码：
<template>
<div>
<h2>员工姓名：{{name}}</h2>
<h2>员工年龄:{{age}}</h2>
<h2>员工性别:{{sex}}</h2>
</div>
</template>
<script>
//引入一个hunhe
import {minxin} from '../minxin'
export default{
name:'staff',
data(){
return {
name:'张三',
age:40,
sex:'男'
}
},
//这里必须使用数组的形式，可以添加多个混合，不仅可以使用到这里，也可以在其他子组件中使用。
//若添加的混合内部的部分数据与本
//页面上的某个数据起到冲突时(两个数据都一样)，那么会已本页面中为主，不会破坏本页面中的数据，
//若是生命周期里面的钩子，那么他是不会
//听从本页面的，直接继续叠加在本页面同样数据中呈现
minxins:[minxin]
}
</script>
<style scoped>
</style>
minxin.js源码：
export const minxin={
methods:{
showName(){
alert(this.name);
}
},
mounted(){
console.log('你好呀');
}
}
mixin混入：
将一个内容被同时多个子组件使用（该内容是两个子组件的共同部分）。
功能：可以把多个组件共用的配置提取成一个混入对象
使用方式：
第一步定义混合，例如：
{
data( ) {...},
methods:{...}
....
}
第二步使用混入，例如：
（1）全局混入，vue.minxin（xxx）
（2）局部混入，minxins:【'xxx'】
知识点拓展：
在创建子组件时，切记不能创建多个components文件，内部是单独存放所有的子组件的，若是创建多个同级的文件，那么系统会报错，所以不可以创建多个同级文件，其中包含（src文件，components文件，main.js文件等都不可以创建多个），若必要创建时，需要更改vue框架系统内部的默认的设置，否则系统就会报错，无法执行。
