vue 组件基本使用

组件的基本使用

注册组件

注册组件就是利用Vue.component()方法，先传入一个自定义组件的名字，而后传入这个组件的配置。vue.component()注册的全局组件

Vue.component('hello-world',{
    template: `<div>这是一个自定义组件</div>`,
    data () {
      return {
        message: 'hello world'
      }
    }
  })

组件使用

以在一个经过 new Vue 建立的 Vue 根实例中，把这个组件做为自定义元素来使用

html

<div id="app">
  <hello-world></hello-world>
</div>

var app = new Vue({ el: '#app'})

定义局部组件(局部组件只能在当前vue实例中使用)

var app = new Vue({
    el: '#app',
    data: {
    },
    components: {
      'my-component': {
        template: `<div>这是一个局部的自定义组件，只能在当前Vue实例中使用</div>`,
      }
    }
  })

模板的要求

注意：组件的模板只能有一个根元素。下面的状况是不容许的。

template: `<div>这是一个局部的自定义组件，只能在当前Vue实例中使用</div>
            <button>hello</button>`,
  //改成   
  template: `<div>
                <div>这是一个局部的自定义组件，只能在当前Vue实例中使用</div>
                <button>hello</button>
            </div>`,

模板能够在外面定义

<div id="app">
        <mycomponent></mycomponent>
    </div>
    <template id="mycomponent">
        <h1>mycomponent</h1>
    </template>
    
    <script>
        Vue.component('mycomponent', {
            template: '#mycomponent'
           
        })
        var app = new Vue({ el: '#app'})
    
    </script>

组件中的data必须是函数

能够看出，注册组件时传入的配置和建立Vue实例差很少，但也有不一样，其中一个就是data属性必须是一个函数。
这是由于若是像Vue实例那样，传入一个对象，因为JS中对象类型的变量实际上保存的是对象的引用，因此当存在多个这样的组件时，会共享数据，致使一个组件中数据的改变会引发其余组件数据的改变。
而使用一个返回对象的函数，每次使用组件都会建立一个新的对象，这样就不会出现共享数据的问题来了。

DOM模板的解析问题

当使用 DOM 做为模版时 (例如，将 el 选项挂载到一个已存在的元素上), 你会受到 HTML 的一些限制，由于 Vue只有在浏览器解析和标准化HTML后才能获取模板内容。尤为像这些元素 ul，ol，table，select 限制了能被它包裹的元素，而一些像 这样的元素只能出如今某些其它元素内部

在自定义组件中使用这些受限制的元素时会致使一些问题，例如：

<table>
  <my-tr>...</my-tr>
</table>

自定义组件 被认为是无效的内容，所以在渲染的时候会致使错误。这时应使用特殊的 is 属性：

<table>
  <tr is="my-tr"></tr>
</table>

也就是说，标准HTML中，一些元素中只能放置特定的子元素，另外一些元素只能存在于特定的父元素中。好比table中不能放置div，tr的父元素不能div等。因此，当使用自定义标签时，标签名仍是那些标签的名字，可是能够在标签的is属性中填写自定义组件的名字。

应当注意，若是您使用来自如下来源之一的字符串模板，这些限制将不适用：

• <script type="text/x-template">
• JavaScript 内联模版字符串
• vue 组件