复习
vuecomponent
<div class="root1">
<school></school>
<hello></hello>
</div>
</body>
<script>
const school =Vue.extend({
name:'school',
template:`
<div> <h2>学校名称:{{schoolName}}</h2>
<h2 >学校地址:{{address}}</h2>
<button @click="msg">点我看</button>
</div>
`,
data(){
return {
schoolName:'西邮',
address:'西安',
}
},
methods:{
msg(){
console.log(this)//this 指向的是组件实例对象vc
}
}
})
//定义hello组件
const hello=Vue.extend({
template:`
<div>
{{msg}}</div>
`,
data(){
return {
msg:'hello'
}
}
})
// console.log(school)
// console.log(hello)
const vm=new Vue({
el:'.root1',
components:{
school,
hello
}
})
console.log(vm)
</script>
1.school组件本身是一个VueComponent的构造函数 是Vue.extend生成的
2.写 <school/>标签 会创建school组件的实例对象
3.每次调用Vue.extend 返回的是全新的VueComponent
4.组件配置中 this指向是VueComponent实例对象(简称vc) new vue指向是vue实例对象(简称vm)
内置关系
<div class="root1">
</div>
</body>
<script>
const school =Vue.extend({
name:'school',
template:`
<div> <h2>学校名称:{{schoolName}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
`,
data(){
return {
schoolName:'西邮',
address:'西安'
}
},
})
new Vue({
el:'.root1',
data:{
name:'张三'
}
})
console.log(school.prototype.__proto__===Vue.prototype) //true
</script>
VueComponent.prototype.__proto__===Vue.prototype
单文件组件写法
分析脚手架
ref配置
<template>
<div>
<h1 ref="title">{{ msg }}</h1>
<button @click="show">点我提示输出上方DOM元素</button>
<School ref="sch"></School>
</div>
</template>
<script>
import School from './components/School'
export default {
name: 'App',
components: {
School,
},
data() {
return {
msg:'你好'
}
},
methods: {
show(){
console.log(this.$refs.title)
console.log(this.$refs.sch)
}
}
}
</script>
在HTML标签上添加ref属性 输出了真实DOM元素
在组件标签上添加ref属性 输出组件实例对象
props配置
App组件
<template>
<div>
<!-- 传入数据 -->
<!-- 传入age时 是字符串数据 要在前面加冒号 会当做表达式执行 在收数据的一方进行改变的时候不出错-->
<Student name="李四" :age="12"></Student>
</div>
</template>
子组件
//接收数据 尽量不要修改props传入的值
//简单接收
props: ['name', 'age'],
//接收同时进行限制 对象写法
props: {
name: String,
age:Number
},
//更具体的写法
props: {
name: {
type: String,
required:true //name是必须的
},
age: {
type: Number,
default:19 //默认值是19
}
}
mixin
mixin.js
//分别暴露
export const mix = {
methods: {
show() {
alert(this.name)
}
},
data() {
return {
x:0
}
}
}
子组件引入
<script>
import {mix} from '../mixin'
export default {
name:'Student',
data() {
return {
name: '张三',
age:21
}
},
mixins:[mix]
}
</script>
如果混入数据与自己配置的数据冲突的话 以自己的数据为首要
特殊:生命周期钩子 如果组件自身与混入都有生命周期钩子 则两者都调用 且混入的调用在前
对于组件相同的部分可以使用混入