vue组件

最新推荐文章于 2024-05-13 18:14:47 发布

前端xqf

最新推荐文章于 2024-05-13 18:14:47 发布

阅读量114

点赞数

分类专栏： vue 文章标签： vue组件

本文链接：https://blog.csdn.net/weixin_42635130/article/details/90612946

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

组件

组件化

组件化是当今最为流行的一种可复用性增加的方法，随着当今前端开发的复杂度更加，这个组件化变得越来越流行

组件的基础

组件是一个具备html css img js …等的一个聚合体
组件的表现形式就类似一个标签
组件至少得有模板

组件的具体使用

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

<body>
  <div id="app">
    <Hello></Hello>
  </div>
</body>
<script>
  //1. 组件的配置项
  const Hello = Vue.extend({
    template: '<div> Hello component!!! </div>'
  })
  // 2. 组件的注册
  
  Vue.component( 'Hello', Hello )
  
  // 3. 组件的使用
  new Vue({
    el: '#app'
  })
 


</script>

      - 局部注册
        格式： 
          写在组件内注册
          举例： 
            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>
          `
      }
    }
  })
  
  // new Vue({
  //   el: '#root'
  // })

</script>

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

<body>
  <div id="app">
    <Hello></Hello>
  </div>
  <template id="hello">
    <div>
      <h3> hello 预祝端午节happy </h3>
    </div>
  </template>
</body>
<script>
new Vue({
    el: '#app',
    components: {
      'Hello': {
        template: '#hello'
      }
    }
  })
  
  // new Vue({
  //   el: '#root'
  // })
</script>

<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>
new Vue({
    el: '#app',
    components: {
      'Hello': {
        template: '#hello'
      }
    }
  })
  
  // new Vue({
  //   el: '#root'
  // })
</script>

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>

<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>
new Vue({
    el: '#app',
    components: {
      'Hello': {
        template: '#hello'
      }
    }
  })
  
  // new Vue({
  //   el: '#root'
  // })
</script>

组件嵌套
全局注册：
要将子组件的组件名写在父组件的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>

局部注册

<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>
new Vue({
  el: '#app',
  components: {
    'Father': {
      template: '#father',
      components: {
        'Son': {
          template: '#son'
        }
      }
    }
  }
})

</script>

前端xqf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件

组件组件化组件化是当今最为流行的一种可复用性增加的方法，随着当今前端开发的复杂度更加，这个组件化变得越来越流行组件的基础组件是一个具备html css img js …等的一个聚合体组件的表现形式就类似一个标签组件至少得有模板组件的具体使用Vue.js通过Vue.extend() 方法来扩展组件的使用Vue.extend( options ) 里面的options参...
复制链接

扫一扫

专栏目录