Vue组件

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

乔清

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

阅读量310

点赞数 2

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

本文链接：https://blog.csdn.net/qq_39687278/article/details/93500112

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue组件

Vue有两大特性

指令 – 用来操作dom
组件 – 组件是html css js 等的一个聚合体

为什么要使用组件

组件化
- 将一个具有完整功能的项目可以多处，多次使用
- 加快项目开发的进度
- 可以进行项目的复用
想要实现组件化，那我们使用这一部分必须是完整的，我们把这个完整的整体称之为–组件。
插件：是由 index.html img css js 等几部分组成，如果其中一部分，因为意外缺失，那么这个插件也就不能使用了。
因此如果能将 html css js img 等多个部分放在一起，那该有多好，vue将这个聚合体的文件称之为，单文件组件（ xx.vue ）

基础的组件创建

Vue.extend() 是 vue用来扩展 vue功能（组件）的
因为组件扩展的实例化和Vue 本身的实例化，基本一致，所以Vue可能觉得这样不算扩展。于是就不使用这种组件扩展的方法。
于是vue借鉴了react，react中组件是以标签的形式使用的，vue 决定组件要以标签的形式呈现
为了符合 html / html5的规则，所以组件的标签化使用必须注册
注册说白了就是用来解析这个标签化的组件为html能识别的标签
- 注册语法：component( '组件名’，option）
- 有连个关键词： component：成分，template：模版
- component 是注册关键词，template 是模板关键词。

全局注册
局部注册

<body>
   <div id="app">
     <Father></Father>				<!-- 使用全局组件 -->
     <son></son>		<!-- 使用全局组件 -->
   </div>
   <div id="root">
 	  <Father></Father>  		<!-- 使用全局组件 -->
 	</div>
 </body>
 <script>
 
   Vue.component('Father',{
     template: '<div> 这里是全局注册 </div>'
   })
  //所有模块都能使用 这个组件
   new Vue({
     el: '#app',   // 模板1
     components: {			//只有组件所在的模块 才能使用这个模块
       'son': {
         template: '<div> 这里是局部注册 </div>'
       }
     }
   })
   new Vue({    //模板2
     el: '#root'
   	})

 </script>

注意: 组件注册只有卸载 Vue 实例前，实例才能使用。

组件的嵌套

父组件里面放子组件 ----> 类似于dom结构的父子级结构
将子组件以标签的形式放在父组件的模板中使用
切记，不要放在父组件的内容中

//有两中写法：
// 第一种： 父组件，和子组件 分开写
 Vue.component('Father',{   //父组件
    template: '<div> Father <Son></Son></div>'  //里边的 son 标签是子组件
  })
  Vue.component('Son',{     //子组件
    template: '<div> son </div>'
  })
// 第二种，子组件直接写在 父组件之内
new Vue({
    el: '#app',
    components: {  //定义父组件
      'Father': {
        template: '<div> father组件 <Son /></div>',    
        //你可能注意到了，这里子组件是半标签，没错 可以写半标签，
        //但是不推荐这样写，H5 提倡，标签成对，因此我们最好把标签写全。
        components: {  //定义子组件
          'Son': {
            template: '<div> son组件 </div>'
          }
        }
      }
    }
  })

is规则

<body>
  <div id="app">
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <Hello></Hello> 
       <!-- 正常情况下我们想把组件放在 table 中，但是这样写的话，组件会出现在 table 外边-->
      <tr is = "Hello"></tr>  
       <!-- 我们这样写，才能把组件插入到 table -->
    </table>
  </div>
</body>
<script>
  /* 
    is规则
      ul>li  ol>li   table>tr>td      select>option
    如上直属父子级如果直接组件以标签化形式使用，那么就会出现bug
    解决： 使用is规则: 通过is属性来绑定一个组件
     <tr is = "Hello"></tr>
  */
  Vue.component('Hello',{
    template: '<tr> <td> 4 </td> <td> 5 </td><td> 6 </td></tr>'
  })
  new Vue({
    el: '#app'
  })
</script>