Vue第19话 组件定义与使用

1.vue文件的组成(3 个部分)

1.1 模板页面

<template>
  //页面模板
</template>

1.2 JS 模块对象

<script>
  export default {
    data() {
      return {}
    },
    methods: {},
    computed: {},
    components: {}
  }
</script>

1.3 样式

<style>
  //样式定义
</style>

2.基本使用

• 引入组件
• 映射成标签
• 使用组件标签

<template>
  <HelloWorld></HelloWorld>
  <hello-world></hello-world>
</template>
<script>
  import HelloWorld from './components/HelloWorld'
  export default {
    components: {
      HelloWorld
    }
  }
</script>
<style>
  //样式定义
</style>

注意: 标签名与标签属性名书写问题

1).写法一: 一模一样

2).写法二: 大写变小写, 并用-连接