Vue（一）组件基础

川长思鸟来 2022-03-19 15:58 260阅读 0赞

### [Vue.component( id, \[definition\] )][Vue.component_ id_ _definition_] ###

*  **参数：**
    
     *  `{string} id`
     *  `{Function | Object} [definition]`
 *  **用法：**
    
    注册或获取全局组件。注册过程中还会自动使用给定的 `id` 设置组件的 `name`。
    
    <table> 
     <tbody> 
      <tr> 
       <td> <pre><code>// 注册组件，传入一个扩展过的构造器
    Vue.component('my-component', Vue.extend({ /* ... */ }))
    
    // 注册组件，传入一个选项对象（自动调用 Vue.extend）
    Vue.component('my-component', { /* ... */ })
    
    // 获取注册的组件（始终返回构造器）
    var MyComponent = Vue.component('my-component')</code></pre> </td> 
      </tr> 
     </tbody> 
    </table>

**一、全局组件的注册与使用 **

**二、当前vue实例下使用组件**

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <add></add>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data:{
                h: 'Hello'
            },
            components:{
              add: {
                  template: "<button>parentData：{
       { btn }}</button>",
                  data: function () {
                      return {'btn': 123}
                  }
              }
            }
        })
    </script>

**三、组件注意**

1、组件里的data需要是个函数

2、组件必须只能有一个根元素

Vue.component('example', {
        template: `
              <div>
                <span>{
       { message }}</span>
                <button @click="updateMessage()">更新</button>
              </div>`,
        data: function () {
          return {
            message: 'not updated'
          }
        },
        methods: {
          updateMessage: function () {
            this.message = 'updated'
            console.log(this.$el.textContent) // => 'not updated'
            this.$nextTick(function () {
              console.log(this.$el.textContent) // => 'updated'
            })
          }
        }
      })

[Vue.component_ id_ _definition_]: https://vue.docschina.org/v2/api/#Vue-component