Vue.js组件基础_vue koala-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44050518/article/details/90647761

组件的基础

组件是一个具备html css img js …等的一个聚合体
组件的表现形式就类似一个标签
组件至少得有模板
Vue.js通过Vue.extend() 方法来扩展组件的使用
Vue.extend( options ) 里面的options参数和 Vue(options) 的options参数几乎是一致的
new Vue出来的 ViewModel( 视图模型 ) 也是一个组件，我们称之为 ‘根实例组件’ ，叫 ‘Root’ 组件
Vue中组件的表现形式是类似于标签的，要想像标签一样使用，就必须得符合 h5 的规则，也就是必须要进行组件的注册
组件的注册有两种形式
全局注册
格式： Vue.component(组件的名称，组件的配置项)

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

	  // 组件的配置项
        const Hello = Vue.extend({
            template:'<h3>端午节快乐</h3>'
        })
        // 组件注册
        Vue.component( 'Hello',Hello )
         // 简写
        Vue.component( 'Hello',{
            template:'<h3>520</h3>'
        } )
        //组件的使用
        new Vue({
            el:'#app',

        })

局部注册

 new Vue({
    el: '#app',
    components: {
      'Hello': {
        template: `
          <h3> hello 局部注册
          <p> 1902 </p> </h3>
          `
      }
    }
  })

组件必须先注册在使用
组件中的模板需要使用一个叫做template的配置项表示
. 组件的配置项可以简写，不需要使用 Vue.extend(options),可以直接将options写在组件的注册中
template组件中有且仅有一个根元素

组件使用时有规则的：
比如特殊的一些标签： ul li ol li table tr td dl dt dd select option …这类型标签，是规定了它们的直接子元素，当我们将组件写入这类型标签的时候，就会发现有问题

   解决： 在直接子元素身上，通过 is 属性来 绑定  一个组件

   举例： 
   <table>
     <tr>
       <td>1</td>
       <td>2</td>
       <td>3</td>
     </tr>
     <!-- <Hello></Hello>  这么写有问题-->
     <tr is = "Hello"></tr>
   </table>