组件

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

weixin_44889992

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

阅读量120

点赞数

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

本文链接：https://blog.csdn.net/weixin_44889992/article/details/89459455

版权

vue 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

组件

组件化思维
组件化针对的是页面中的整个完整的功能模块划分（项目的分工）
组件的概念（一个文件）
组件是一个html、css、js、image等外链资源，这些部分组成的一个聚合体
优点：代码复用，便于维护
划分组件的原则：复用率高的，独立性强的

组件命名建议使用两种方式
使用 kebab-case
举例
Vue.component(‘header-title’,{})
使用 PascalCase
举例：
Vue.component(‘MyComponentName’, { /* … */ })
解释：为什么要是上面两种写法 ? 为了区别html的原生标签
组件的嵌套
template
组件根元素唯一
data选项

为什么组件使用必须注册？

vue.js文件中暴露出一个Vue的构造器函数，这个函数的作用，是用来实例化出来一个实例，那么这个实例也是一个组件，我们称之为 ‘根实例’
我们从vue detools中我们发现这个实例的表现形式是一个标签
Vue为了扩展功能，给了一个方法，这个方法叫 extend
我们对比 Vue vs Vue.extend() 我们发现这两个方法输出结果都是两个构造器函数，并且很相似
那么我们进一步得到一个结果：使用方法一致吗？

new Vue.extend() 报错不需要进行实例化，它希望组件的表现形式应该是标签
要想像标签一样使用，必须准守 h5 的标准，也就是说组件必须合法，要想合法，必须注册（登记）
组件使用前必须注册

组件的注册有两种方式

全局注册
局部注册
注意：
全局和局部指的范围

以下是全局注册和局部注册的标准写法

全局注册

<body>
        <div id="app">
              <Hello></Hello>
              <Hello/>
       </div>
       <div id="app1">
              <Hello></Hello>
       </div>
</body>
<script>

/* Vue.extend({
template: 模板，
data(){},
mthods: {},
watch: {},
computed:{}
}) */
var Hello = Vue.extend({
template: '<div> hello component </div>'
})
// 全局注册： Vue.component(组件名,组件的配置项)
Vue.component('Hello',Hello)
new Vue({
      el: '#app',
})
new Vue({
     el: '#app1',
})
</script>

局部注册

<body>
       <div id="app">
          <Hello></Hello>
          <Hello/>
      </div>
      <div id="app1">
          <Hello></Hello>
      </div>
</body>
<script>

var Hello = Vue.extend({
         template: '<div> hello component </div>'
})
new Vue({
       el: '#app',
      components: {
           'Hello': Hello
      }
})
</script>

以下是全局注册和局部注册的简写

全局注册
Vue.component(组件名称，组件的配置项)


Vue.component('Hello',{
           template: '<h3> Hello 全局注册</h3>',
           computed: {
            },
           methods: {
            },
           watch: {
            }
})

局部注册

new Vue({
      el: '#app',
     components: {
            'hello-yyb': {
                 template: '<div> hello 骏哥今天干吗去了 </div>'
                }
           }
})

组件的嵌套

全局注册的嵌套

<body>
        <div id="app">
           <Father></Father>
        </div>
</body>
<script>
/*
<Father>
<Son></Son>
</Father>
上面写法是错的 why? 组件的渲染内容是由配置项 template决定的
正确写法：
将子组件以标签的形式放在父组件的tempalte选项中
*/
Vue.component('Father',{
           template: '<h3> father <Son></Son> </h3>'
})
Vue.component('Son',{
          template: '<h3> son </h3>'
})
new Vue({
      el: '#app',
})
</script>

局部注册的嵌套

<body>
         <div id="app">
             <Father></Father>
         </div>
</body>
<script>
/*
总结：
组件嵌套： 局部注册形式
子组件必须在父组件中注册之后才能在父组件的模板中使用
*/
new Vue({
       el: '#app',
       components: {
       'Father': {
           template: '<div> father <Son/> </div>',
      components: {
         'Son': {
           template: '<h3> Son </h3>'
            }
         }
    }
 }
})
</script>
</html>

template外用

<body>
       <div id="app">
              <Hello></Hello>
       </div>
<template id="Hello">
       <div class="content">
           <ul>
                <li><a href="">你好</a></li>
                <li><a href="">你好</a></li>
                <li><a href="">你好</a></li>
          </ul>
      </div>
</template>
</body>
<script>
Vue.component('Hello',{
          template: '#Hello'
})
new Vue({
          el: '#app',
})
</script>

组件模板的根元素唯一

<body>
            <div id="app">
                <Hello></Hello>
               <template>
                    <div> 第一个template </div>
               </template>
           </div>
<template id="Hello">
          <div>
                <div> 这是hello 组件的template </div>
                <div> 这是hello 组件的template </div>
                <div> 这是hello 组件的template </div>
                <div> 这是hello 组件的template </div>
          </div>
</template>
</body>
<script>
Vue.component('Hello',{
          template: '#Hello'
})
new Vue({
          el: '#app',
})
</script>

总结：

组件的template如果body里面的话，一定记住要放在 #app 的div外
组件的template在body中使用的话，是不会解析的，但是组件内的template是会解析的
组件的模板中的直接子元素必须有一个，如果你要有多个，必须使用v-if v-else-if

组件data选项

<body>
            <div id="app">
                <Hello/>
            </div>
       <template id="Hello">
              <div>
                  {{ msg }}
              </div>
       </template>
</body>
<script>
Vue.component('Hello',{
           template: '#Hello',
         data(){
               return {
                       msg: 'hello 骏哥'
                   }
             }
   })
new Vue({
          el: '#app',
          data: {}
})
</script>