一个重要的内置关系
组件的本质是名为VueComponent的构造函数
每次调用Vue.extend 返回的都是一个全新的组件
一个重要的内置关系
VueComponent.prototype.__proto__ === Vue.prototype
为什么要有这个关系？
让组件实例对象（vc）可以访问到Vue原型上的属性、方法
例如：给Vue原型上添加一个方法，vm和vc都可以使用
Vue.prototype.hello = ()=>{alert('你好')}
一、props配置
作用：让组件接收外部传来的数据
例如：Student是一个组件，置于App中
1.传递数据：App.vue中
<Student name="李四" sex="女" v-bind:age="18"></Student>
**注：**接收到的数据为字符串类型，上述需使用:age
2.接收数据：Student.vue中
接收数据三种方法：
①简单接收（数组）
props:['name','age','sex']
②接收同时对数据进行类型限制
props:{
name:String,
age:Number,
sex:String
}
③接收的同时对数据进行类型限制+默认值的指定+必要性的限制
props:{
name:{
type:String,
required:true //必要
},
age:{
type:Number,
default:99 //默认值
},
sex:{
type:String,
required:true
}
}
**注：**props只读 不可修改，如果需要修改，复制props内容到data中
例如：实现点击按钮=>age+1，Student.vue代码如下
<template>
<div>
<h1>{{msg}}</h1>
<h2>学生姓名：{{ name }}</h2>
<h2>学生年龄：{{ myAge+1 }}</h2>
<h2>学生性别：{{ sex }}</h2>
<button @click="updateAge">尝试修改年龄</button>
</div>
</template>
<script>
export default {
name: "School",
data() {
return {
msg:"我是一个学生",
myAge:this.age
}
},
props:['name','age','sex'], //简单接收
methods: {
updateAge(){
this.myAge++;
}
},
};
</script>
二、mixin混合
作用：可以把多个组件共用的配置提取成一个混入对象
1.定义混合
单独写出一个js文件来保存共用配置
export const mixin = {
methods: {
showName(){
alert(this.name)
}
},
}
2.使用混入
子组件中写入
全局：
Vue.mixin()
局部：
mixins:[mixin]
注： 当发生冲突时，data中数据和methods中方法都以自身本来的为主，但mouted函数中内容都要，混合中的内容在前，自身本来的在后
三、插件
插件的本质是对象
1.定义插件
单独写一个js文件保存插件内容
export default{
install(Vue){.....}
}
2.使用插件
在main.js文件中编写
import plugins from './plugins'
Vue.use(plugins)
四、scoped样式
在两个并列组件中使用同一类名编写样式时，发生冲突：后引入的组件样式覆盖先引入的组件。
解决办法：使用scoped
<style scoped>
.demo{
background-color: skyblue;
}
</style>
|