Vue组件的使用

  1. Vue.js通过Vue.extend() 方法来扩展组件的使用
<div id="app">
    <Hello></Hello>
</div>
  //1. 组件的配置项
  const Hello = Vue.extend({
    template: '<div> Hello component!!! </div>'
  })
  // 2. 组件的注册
  
  Vue.component( 'Hello', Hello )
  
  // 3. 组件的使用
  new Vue({
    el: '#app'
  })
  1. Vue.extend( options ) 里面的options参数和 Vue(options) 的options参数几乎是一致的
  2. new Vue出来的 ViewModel( 视图模型 ) 也是一个组件,我们称之为 ‘根实例组件’ ,叫 ‘Root’ 组件
  3. Vue中组件的表现形式是类似于标签的,要想像标签一样使用,就必须得符合 h5 的规则,也就是必须要进行组件的注册
  4. 组件的注册有两种形式
<div id="app">
    <Hello></Hello>
</div>
  • 全局注册
    • 格式: Vue.component(组件的名称,组件的配置项)
Vue.component( 'Hello', {
    template: '<h3> hello 组件的简写 </h3>'
  })
   - 组件的命名规则
     - 举例:
     
           1. Father Hello 
           2. my-button
  • 局部注册
    • 格式:
      写在组件内注册
      • 举例:
      •  new Vue({
             el: '#app',
             components: {
               'Hello': {
                 template: `
                   <h3> hello 局部注册
                   <p> 1902 </p> </h3>
                   `
               }
             }
           })
        
  1. 组件必须先注册在使用
  2. 组件中的模板需要使用一个叫做template的配置项表示
  3. 组件的配置项可以简写,不需要使用 Vue.extend(options),可以直接将options写在组件的注册中
// 1. 组件的注册
  
  Vue.component( 'Hello', {
    template: '<h3> hello 组件的简写 </h3>'
  })
  
  // 2. 组件的使用
  new Vue({
    el: '#app'
  })
  1. template组件中有且仅有一个根元素
<div id="app">
    <Hello></Hello>
  </div>
  <template id="hello">
    <div>
      <div>
        <h3> hello 预祝端午节happy </h3>
      </div>
      <div>
        <h3> hello 预祝端午节happy </h3>
      </div>
    </div>
  </template>
new Vue({
    el: '#app',
    components: {
      'Hello': {
        template: '#hello'
      }
    }
  })
  1. 组件使用时有规则的:
    比如特殊的一些标签: 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>
    
  2. 组件嵌套

结构:

<div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3>  father </h3>
      <hr>
      <Son></Son>
    </div>
  </template>
  <template id="son">
    <h3> son </h3>
  </template>

全局注册:要将子组件的组件名写在父组件的template中

Vue.component('Father',{
    template: '#father'
  })
  Vue.component('Son',{
    template: '#son'
  })

  new Vue({
    el: '#app',
  })

局部注册

  new Vue({
    el: '#app',
    components: {
      'Father': {
        template: '#father',
        components: {
          'Son': {
            template: '#son'
          }
        }
      }
    }
  })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值