Vue基础学习 --- 全局组件与局部组件

组件分为

• 全局组件

• 局部组件

  全局组件

• // 语法---Vue.component('组件名', {组件参数})
  Vue.component('com1', {
      template: '<button @click="count++">你点了我{{count}}次</button>',
      data() {
          return {
              count: 0
          }
      }
  })

  示例：

  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>我是测试vue</title>
      <!-- 01-引入vue -->
      <script src="./node_modules/vue/dist/vue.js"></script>
  </head>
  
  <body>
      <!-- 02创建一个div，ID为app -->
      <div id="app"> <!-- 02-使用组件 --><com></com>
      </div>
      <script>//01-创建全局组件
          Vue.component('com', {
              template: '<button @click="add">你点击了我{{count}}次</button>',
              data() {
                  return {
                      count: 0
                  }
              },
              methods: {
                  add() {
                      this.count++
                  }
              }
          })
          const vm = new Vue({
              el: '#app',//对应的操作区，必填
              data: {
                  msg: ''
              },//数据
              methods: {}//方法
          });
      </script>
  </body>
  
  </html>

  说明：

• • 组件没有el参数, 原因是组件不会和具体的页面元素绑定

  • 组件必须有template参数, 原因是组件需要渲染页面, template就是需要渲染的html

  • 组件也是一个Vue的实例, 所以在组件中也有data/methods等

  • data必须是一个函数, 并返回一个对象

  局部组件

  1. 组件的html部分是在template标签中渲染

  2. 组件的js部分就是组件参数(对象)

  示例：

  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./node_modules/vue/dist/vue.js"></script>
  </head>
  
  <body>
      <div id="app">
          <!-- 04-使用组件 -->
          <son></son>
          <abc></abc>
      </div>
  
      <!-- 02-局部组件的样式在这里实现 -->
      <template id="jubu">
          <div>
              <button @click="count++">你点击了{{count}}次</button>
          </div>
      </template>
  
      <script>
          //01-定义局部组件
          const jubu = {
              template: '#jubu',
              data() {
                  return {
                      count: 0
                  }
              },
          }
  
          const vm = new Vue({
              el: '#app',
              data: {},
              methods: {
  
              },
              //03- 挂载局部组件
              components: {
                  // 定义组件---组件名：组件参数对象
                  son: jubu,
                  abc: jubu
              }
          });
      </script>
  </body>
  
  </html>