前端Vue2-Day52

标签：Vue const name extend 前端 Vue2 组件 Day52 template

Vue组件化编程：

非单文件组件：一个文件包含n个组件

① 定义组件：Vue.extend(options)创建，在options内部不能写el(组件都需要经过vm统一管理和分配)，data必须写成函数模式，避免组件复用时数据存在引用关系。

② 注册组件：局部注册：new Vue时创建的components属性。全局注册：Vue.component('组件名'，组件)

③ 使用组件(直接在页面写组件标签)

 

注意点：

① 组件命名：

• 一个单词：首字母大写或首字母小写
• 多个单词：短横线命名（school-name）或大驼峰命名（SchoolName）需要Vue脚手架支持
• 可以在组件内部定义name配置项指定组件在开发者工具中呈现的名字

② 组件标签：

1.<school></school>写法

2.<school/>写法：若不在Vue脚手架环境下，则该种写法会导致后续组件不能渲染。

③ 定义的简写方式：

const xxx = Vue.extend(options) 可简写为 const xxx = options

const person = {
            data() {
                return {
                    name: 'LWH',
                    age: 18
                }
            },
            template: `
            <div>
                <h1>name: {{name}}</h1>
                <h2>age: {{age}}</h2>
            </div>
            `,
  }

 

组件嵌套：可以在组件内部再次注册组件，利用app组件管理所有子组件。

　　　　const student = Vue.extend({
            template: `<div>
                <h2>{{name}}</h2>
                <h2>{{age}}</h2>
            </div>`,
            data() {
                return {
                    name: 'LWH',
                    age: 22
                }
            }
        })
        const school = Vue.extend({
            template: `<div>
                <h2>{{name}}</h2>
                <h2>{{address}}</h2>
                <student></student>
            </div>`,
            data() {
                return {
                    name: 'HNU',
                    address: 'HRB'
                }
            },
            components: {
                student
            }
        })
        const hello = Vue.extend({
            template: `<h2>Hello {{name}}</h2>`,
            data() {
                return {
                    name:'LWH'
                }
            }
        })
        // 管理所有组件的组件
        const app = Vue.extend({
            template: `<div>
                    <school></school>
                    <hello></hello>
                </div>`,
            components: {
                school,
                hello
            }
        })
        new Vue({
            el: '#root',
            components: {
                app
            },
            template:`<app></app>`
        })

 

VueComponent：

 

单文件组件：一个文件仅包含一个组件

标签：Vue,const,name,extend,前端,Vue2,组件,Day52,template
From： https://www.cnblogs.com/LWHCoding/p/16795754.html