Vue组件文件的注意项
ref属性
ref属性
- 被用来给元素或子组件注册引用信息(id的替代者)
- 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
- 使用方式:
打标识:<h1 ref="xxx">.....</h1>
或<School ref="xxx"></School>
获取:this.$refs.xxx
<!-- App.vue -->
<template>
<div>
<h1 v-text="msg" ref="title"></h1>
<button @click="showDOM">点击出现上方DOM元素</button>
<School ref="sch"></School>
</div>
</template>
<script>
//引入组件
import School from "./components/School.vue";
export default {
name: "App",
data() {
return {
msg: "欢迎学习",
};
},
components: {
School,
},
methods: {
showDOM() {
console.log(this.$refs.title);
console.log(this.$refs.bth); //真实DOM元素类型
console.log(this.$refs.sch); //school组件的实例对象(vc)
},
},
};
</script>
配置项props
功能:让组件接收外部传过来的数据
-
传递数据:
<Demo name="xxx"/>
-
接收数据:
-
第一种方式(只接收):
props: ['name']
-
第二种方式(限制类型):
props:{name : Number}
-
第三种方式(限制类型、限制必要性、指定默认值):
props:{
name:{
type:String, //类型
required:true,//必要性
default:'老王’, //默认值}
}
}
-
备注: props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,
若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。
<!-- student.vue -->
<template>
<div>
<h2>学生名称:{{ name }}</h2>
<h2>学生性别:{{ sex }}</h2>
<h2>学生年龄:{{ myAge }}</h2>
<button @click="updateAge">尝试修改收到的年龄</button>
</div>
</template>
<script>
export default {
name: `Student`,
data() {
return {
msg: "我是一个学生",
myAge: this.age,
};
},
methods: {
updateAge() {
this.myAge++;
},
},
// props:['name','sex','age'],//简单接收
// //接收的同时对数据进行类型限制
// props:{
// name:String,
// age:Number,
// sex:String,
// }
//按收的同时对数据:进行类型限制+默认值的指定+必要性的限制
props: {
name: {
type: String,
required: true, //name是必要的
},
age: {
type: Number,
default: 99, //默认值
},
sex: {
type: String,
required: true,
},
},
};
</script>
mixin(混入)
功能:可以把多个组件共用的配置提取成一个混入对象
使用方式:
第一步定义混合,例如:
{
data(){....},
methods:{....}
....
}
第二步使用混入,例如:
- 全局混入:
Vue.mixin(xxx)
- 局部混入:
mixins: [ 'xxx' ]
<script>
import {hunhe ,hunhe2} from '../mixin'
export default {
name: `Student`,
data() {
return {
name: "苏槿年",
address:'武汉',
};
},
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()
scoped样式
作用:让样式在局部生效,防止冲突。
写法: <style scoped>
总结
-
组件化编码流程:
-
拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突。
-
实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:
- 一个组件在用:放在组件自身即可。
- 一些组件在用:放在他们共同的父组件上(状态提升)。
-
实现交互:从绑定事件开始。
-
-
props适用于:
- 父组件==>子组件 通信
- 子组件==>父组件 通信(要求父先给子一个函数)
-
使用v-model时要切记:v-model绑定的值不能是props传过来的值,因为props是不可以修改的!
-
props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做。