七叶笔记 » golang编程 » Vue基础入门，第22节，组件的声明与使用

Vue基础入门，第22节，组件的声明与使用

分类: golang编程 | 浏览: 289

一、定义组件需要使用Vue.extend(options)创建

应当注意2点：（1）不要写el，（2）data需要写成函数，（3）使用template声明组件结构

二、注册组件

通过new Vue的components属性进行局部注册

通过Vue.component(“组件名”,组件)进行全局注册

三、使用组件

通过组件标签使用组件

<laoshi></laoshi>

<laoshi></laoshi>

<xusheng></xusheng>

<xusheng></xusheng>

四、操作流程

1、声明组件 

     const teacher = Vue.extend({
        template:`
          <div>
          <h3>{{Name}}今年{{Age}}岁了</h3>
          </div>
        `,
        data() {
            return {
                Name: "张三丰",
                Age: "118",
            }
        },
    })
    const student = Vue.extend({
        template:`
          <div>
          <h3>{{Name}}今年{{Age}}岁了</h3>
          </div>
        `,
        data() {
            return {
                Name: "张无忌",
                Age: "18",
            }
        },
    })

2、注册组件 

 components: {
    laoshi: teacher,
    xusheng: student
}

3、使用组件 

 <div id="app">
    <laoshi></laoshi>
    <xusheng></xusheng>
</div>

4、组件的复用 

 <div id="app">
    <laoshi></laoshi>
    <laoshi></laoshi>
    <xusheng></xusheng>
    <xusheng></xusheng>
</div>

5、截图

相关文章