「这是我参与11月更文挑战的第27天，活动详情查看：2021最后一次更文挑战」。
组件的自定义属性props
props节点是和data、methods等同级的节点，值是一个数组
<script>
// 基本语法
export default {
// 组件的自定义属性，允许自定义当前组件指定数据的初始值
props: ['自定义的属性A','自定义的属性B','其他自定义的属性...'],
// 组件的私有数据
data(){
return{
// 数据
}
}
}
</script>
使用方法：
- 在封装组件的时候上写一个props节点，并且设置一个自定义的属性
通过打印this会发现，this指向当前Vue组件的实例，init是对象里面的一个属性，因此可以通过this.init访问
- 使用上面的组件的时候，在标签内为上面自定义的属性设置属性值，即是为这个组件指定了一个初始值（注意：指定的这个值是字符串）
只需要在设置自定义属性的时候，使用v-bind绑定属性，这样赋值的就是数字型(因为使用v-bind绑定属性时，写的是js代码，js代码中的字符串要加引号，即" '9' ")
- 在封装的组件上将要使用的初始值渲染到指定的位置
props中的数据，可以直接在模板结构中被使用
注意！props节点设置的数据是"只读"的！（可以修改成功，但是会报错）。若想修改props节点里面数据的值，可以将props里面的数据转存到data节点里面，因为data节点里面的数据都是可读可写的(props节点只负责设置初始值，改写的数据是data里面的数据)
props的default默认值
在声明自定义属性时，可以通过default来定义属性的默认值
<script>
export default {
props: { // 注意这里的props节点里面指向的是 对象 而不是数组
init: { // 自定义属性init，指向一个配置对象
// 用default属性定义 自定义属性的默认值
default: 0
// 若外界使用该组件的时候没有传入init属性的值，则默认值生效，为0
}
}
}
</script>
props的type值类型
在声明自定义属性时，可以通过type来定义属性的值类型
<script>
export default {
props: {
init{
// default属性 定义自定义属性的默认值
default: 0,
// 用type属性 定义自定义属性的值类型
// 如果传递过来的值不符合此类型，则会在终端报错
type: Number // init的值类型必须是Number数字型
}
}
}
</script>
props的required必填项
必填项校验required设置为true，则在使用组件的时候自定义属性必须传值，否则就报错 (即使有默认值也会报错)
非单文件组件和单文件组件
非单文件组件：一个文件中包含n个组件 ---> a.html
单文件组件：一个文件中只包含一个组件 ---> a.vue
<!-- 准备一个容器 -->
<div id="#root">
<student></student>
</div>
<script>
// 1、创建student组件 Vue的extend方法
const student = Vue.extend({
name: 'student', // 创建组件时的name属性指定组件在 开发者工具 中呈现的名字
template: `
<div></div>
`, // template节点，配置组件的HTML结构,必须要有div容器(用模板字符串写比较方便)
data(){ // 数据必须使用函数写法
return {} // return返回一个数据对象
},
methods: {}
})
// 简写方法 省略了Vue的extend方法
const student = {}
// 2、注册组件，在vm实例中(局部组件)
const vm = new Vue({
el: '#root'
components: { // 注册组件，components节点
student // studnet: student简写 注册的时候写的什么名字，使用的时候就要写什么名字
}
})
// 3、使用组件则直接写组件标签<student></student>
// 注册全局组件 在vm实例外
// Vue.component('组件名称', 组件)
Vue.component('std', student)
</script>
组件的嵌套
在一个组件中注册和使用另一个组件，这就有了父子关系
<body>
<div id="root">
<!-- 使用组件 -->
</div>
<script>
// 定义student组件 子组件必须定义在父组件之前，不然报错
const student = new Vue.extend({
name: 'student', // 创建组件时的name属性指定组件在开发者工具中呈现的名字
template: `
<div>
<h2>学生名称：{{name}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`, // template节点，配置组件的HTML结构,必须有div容器(用模板字符串写比较方便)
data(){ // 数据必须使用函数写法
return {
name: '张三',
age: 18
} // return返回一个数据对象
}
})
// 定义school组件
const school = new Vue.extend({
template: `
<div>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<student></student> <!-- 子组件的使用也要在父组件中 -->
</div>
`, // template节点，配置组件的HTML结构,必须有div容器(用模板字符串写比较方便)
data(){ // 数据必须使用函数写法
return {
name: '叶集大学',
address: '赛博坦'
} // return返回一个数据对象
},
components: { // 子组件要注册在父组件里面
student
}
})
const vm = new Vue({
el: '#root'
components: { // 注册组件，components节点
school
}
})
</script>
</body>
跋尾
本篇内容就到这里了~ 我是Zeus👩🏻🚀来自一个互联网底层组装员，下一篇再见！ 📖
