vue的组件组件的注册组件的使用组件的嵌套

最新推荐文章于 2023-03-16 20:43:35 发布

雾里种花

最新推荐文章于 2023-03-16 20:43:35 发布

阅读量520

点赞数

CC 4.0 BY-SA版权

文章标签： vue的组件组件的注册组件的使用组件的嵌套

本文链接：https://blog.youkuaiyun.com/ThisOnly/article/details/90636722

本文详细介绍了Vue.js中组件的概念，包括如何通过Vue.extend()方法进行组件扩展，以及Vue.options参数的使用。文章阐述了根实例组件（Root组件）的概念，并讨论了组件的两种注册方式：全局注册和局部注册，强调了组件注册的重要性。同时，指出了组件模板的定义方式，组件使用时的注意事项，如特定标签的子元素限制，以及组件嵌套的实现方法，包括全局和局部嵌套的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue的组件

1. Vue.js通过Vue.extend() 方法来扩展组件的使用
2. Vue.extend( options ) 里面的options参数和 Vue(options) 的options参数几乎是一致的
3. new Vue出来的 ViewModel( 视图模型 ) 也是一个组件，我们称之为 ‘根实例组件’ ，叫 ‘Root’ 组件
4. Vue中组件的表现形式是类似于标签的，要想像标签一样使用，就必须得符合 h5 的规则，也就是必须要进行组件的注册
5. 组件的注册有两种形式

全局注册

格式： Vue.component(组件的名称，组件的配置项)
组件的命名规则
举例：
----- Father Hello （大写）
----- my-button（小写用横杠连接）
局部注册

格式：
写在组件内注册
举例：
----- new Vue({
----------componens: {
组件名: 组件配置项
-------- }
------ })
6. 组件必须先注册在使用

<div id="app"></div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<script>
new Vue({
    el: '#app'
  })

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

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

----- 组件的配置项

 const Hello = Vue.extend({
    template: '<div> Hello component!!! </div>'
  })

----- 组件的注册

Vue.component( 'Hello', Hello )

----- 组件的使用（组件必须先注册才能使用）

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

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

···

全局注册

----- 组件的注册

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

----- 组件的使用

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

局部注册

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

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

<body>
  <div id="app">
    <Hello></Hello>
  </div>
  <template id="hello">
    <div>
      <div>
        <h3> hello ，happy </h3>
      </div>
      <div>
        <h3> hello ，happy </h3>
      </div>
    </div>
  </template>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
new Vue({
    el: '#app',
    components: {
      'Hello': {
        template: '#hello'
      }
    }
  })
  
  // new Vue({
  //   el: '#root'
  // })
</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>

<body>
  <div id="app">
    <table>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <!-- <Hello></Hello> -->
        <tr is = "Hello"></tr>
      </table>
  </div>
  <template id="hello">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </template>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<script>
new Vue({
    el: '#app',
    components: {
      'Hello': {
        template: '#hello'
      }
    }
  })
  
  // new Vue({
  //   el: '#root'
  // })
</script>

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

-----全局

<body>
  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
      <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>

-----局部

<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 src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
new Vue({
    el: '#app',
    components: {
      'Father': {
        template: '#father',
        components: {
          'Son': {
            template: '#son'
          }
        }
      }
    }
  })
  

</script>