组件的自定义属性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>
