Vue组件的使用-CSDN博客

本文链接：https://blog.csdn.net/yujiawei1116/article/details/90642598

Vue.js通过Vue.extend() 方法来扩展组件的使用
Vue.extend( options ) 里面的options参数和 Vue(options) 的options参数几乎是一致的
new Vue出来的 ViewModel( 视图模型 ) 也是一个组件，我们称之为 ‘根实例组件’ ，叫 ‘Root’ 组件

例：（全局组件）

<body>
    <div id="app">
        <Hello></Hello>
    </div>
</body>
<script>
    const Hello = Vue.extend({
        template: '<div> Hello </div>'
    })

    Vue.component('Hello', Hello)



    // 简写版

    Vue.component('Hello', {
        template: '<div> Hello我爱你 </div>'
    })


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

</script>

4. Vue中组件的表现形式是类似于标签的，要想像标签一样使用，就必须得符合 h5 的规则，也就是必须要进行组件的注册

5. 组件的注册有两种形式

          **5.1.全局注册
            格式： Vue.component(组件的名称，组件的配置项)
            组件的命名规则
              举例：
                    1. Father Hello 
                    2. my-button
          5.2.局部注册
            格式： 
              写在组件内注册
              举例： 
                new Vue({
                  componens: {
                    组件名: 组件配置项
                  }
                })**

例：（局部注册）

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

6. 组件必须先注册在使用

7. 组件中的模板需要使用一个叫做template的配置项表示

8. 组件的配置项可以简写，不需要使用 Vue.extend(options),可以直接将options写在组件的注册中

9. template组件中有且仅有一个根元素

例：

<body>
    <div id="app">
        <Hello></Hello>
    </div>
    <template id="Hello">
          <!-- 9. template组件中有且仅有一个根元素 -->
        <div>
            <div>
                    我真的真的好爱你
            </div>
            <div>
                    我真的真的好爱你
            </div>
            <div>
                    我真的真的好爱你
            </div>
        </div>
    </template>
</body>
<script>
    new Vue({
        el: '#app',
        components: {
            'Hello': {
                template:
                    '#Hello'
            }
        }
    })
</script>

10. 组件使用时有规则的：

            比如特殊的一些标签： 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>

11. 组件嵌套

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

例：

<body>
    <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>
</body>
<script>
 Vue.component('Father', {
        template: '#father'
    })
    Vue.component('Son', {
        template: '#son'
    })

    new Vue({
        el: '#app',
    })
</script>