一.ref属性:
1.为尽量避免在vue框架中调用原生js的api获取元素(document.querySelector()/ document.getElementById()),应使用ref属性来给元素或者子组件注册引用信息(替代id)
2.用在html标签上获取dom元素,用在子组件上获取组件实例对象
3.使用方法:
// 标签:
<h1 ref="myH1"></h1>
<student ref="myStudent"></student>
// 使用:
this.$refs.myH1 //获取h1这个元素
this.$refs.myStudent //获取student组件实例对象
二.props:
1.用于父组件向子组件传值,在父组件引用子组件标签时在标签上添加属性,子组件通过props接收,存放在组件实例对象身上
父组件传值:
<template>
<div>
<children name="zhangsan"></children> // 通过给子组件标签绑定属性的方式传值
</div>
</template>
<script>
import children from './components/children'
export default{
components:{
children
}
}
</script>
子组件接收:
<template>
<div>
{{name}} // zhangsan
</div>
</template>
<script>
export default{
props:['name'] // 子组件通过props属性接收,存储在组件实例对象VueComponent上
}
</script>
2.props接收的几种方式
①.简单声明接收:
props:['name','age']
②.接收同时对数据类型进行限制:
props:{
name:String,
age:Number
}
③.完整写法:
props:{
name:{
type:String, // 数据类型
required:true, // 必须传入的
defalut:'zhangsan' // 默认值(如果父组件没传值则使用这个默认值)
}
}
注意事项:
1.props是只读属性,尽量避免修改props的值,如果必须要改,则需要通过在data里面再声明变量存储,且通过修改这个data里变量的方式修改数据(即复制外部传进来的数据到data中成为内部自己的数据,再通过修改这个内部数据完成修改需求)
<script>
export default{
data:{
myName:this.name
},
props:['name']
}
</script>
2.数据查找/使用优先级:props>methods>data>computed>watch
三.mixin属性:
一.局部混入:
1.mixin就是提取出组件间的公共配置(复用)
2.步骤:①.新建一个mixin.js文件,
export var mixin = {
methods:{
show(){
console.log(1)
}
},
mounted(){
console.log(2)
}
}
②.引用:
<script>
import {mixin} from '../mixin'
export default{
mixins:[mixin]
}
</script>
3.如果mixin混入的数据和自己data和methods中的数据同名不同值,以data和methods中的数据为准,生命周期函数则是都触发,且混入的数据在前,自己组件配置的生命周期函数在后
二.全局混入:
1.在main.js里引入,通过Vue.mixin()在所有组件上挂载