Vue组件之非单文件组件用法及说明

// 使用Vue.extend创建组件
const Company = Vue.extend({
  template: `
    <div>
      <h2>公司名称：{{name}}</h2>
      <h2>公司地址：{{address}}</h2>
    </div>
  `,
  data() {
    return {
      name: "Vue Company",
      address: "北京"
    }
  }
})

// 全局注册
Vue.component('company', Company)

// 局部注册
new Vue({
  el: '#app',
  components: {
    'company': Company
  }
})

<div id="app">
  <company></company>
</div>

<!-- 完整写法 -->
<company></company>

<!-- 自闭合写法（需要脚手架支持） -->
<company/>

// 定义员工组件
const Employee = Vue.extend({
  template: `
    <div>
      <h3>员工姓名：{{name}}</h3>
      <h3>员工工号：{{id}}</h3>
    </div>
  `,
  data() {
    return {
      name: "张三",
      id: "1001"
    }
  }
})

// 定义公司组件（嵌套员工组件）
const Company = Vue.extend({
  template: `
    <div>
      <h2>公司名称：{{name}}</h2>
      <employee></employee>
    </div>
  `,
  components: {
    'employee': Employee
  },
  data() {
    return {
      name: "Vue Company"
    }
  }
})

// 定义App根组件
const App = Vue.extend({
  template: `
    <div>
      <company></company>
    </div>
  `,
  components: {
    'company': Company
  }
})

// 创建Vue实例
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

Vue实例 (vm)
└── App (vc)
    └── Company (vc)
        └── Employee (vc)

<!-- Company.vue -->
<template>
  <div>
    <h2>公司名称：{{name}}</h2>
    <employee></employee>
  </div>
</template>

<script>
import Employee from './Employee.vue'

export default {
  name: 'Company',
  components: {
    Employee
  },
  data() {
    return {
      name: "Vue Company"
    }
  }
}
</script>

<style scoped>
h2 {
  color: #42b983;
}
</style>