Vue 组件

最新推荐文章于 2024-09-09 08:15:00 发布

Zou_1024

最新推荐文章于 2024-09-09 08:15:00 发布

阅读量233

点赞数

本文链接：https://blog.csdn.net/Zou_1024/article/details/90613166

版权

组件

   <!-- <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> -->

1. Vue.js通过Vue.extend() 方法来扩展 组件的 使用
2. Vue.extend( options ) 里面的options参数和 Vue(options) 的options参数几乎是一致的 
3. new Vue出来的 ViewModel( 视图模型 ) 也是一个组件，我们称之为 '根实例组件' ，叫 'Root' 组件
4. Vue中组件的表现形式是类似于标签的，要想像标签一样使用，就必须得符合 h5 的规则，也就是必须要进行组件的注册 
5. 组件的注册有两种形式
      全局注册
      局部注册
6. 组件必须先注册在使用
7. 组件中的模板需要使用一个叫做template的配置项表示
        //1. 组件的配置项
        const Hello = Vue.extend({
          template: '<div> Hello component!!! </div>'
        })
        // 2. 组件的注册
        
        Vue.component( 'Hello', Hello )
        
        // 3. 组件的使用
        new Vue({
          el: '#app'
        })

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

        Vue.component('Hello', {
            template: '<h3> hello 组件的简写 </h3>'
        })

        // 2. 组件的使用
        new Vue({
            el: '#app'
        })

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

9.template组件中有且仅有一个根元素
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中
        局部注册：
          要将子组件写在父组件的components中