组件-全局/局部注册

最新推荐文章于 2024-04-26 15:48:30 发布

要努力奋斗鸭

最新推荐文章于 2024-04-26 15:48:30 发布

阅读量287

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_52512511/article/details/131621594

版权

1.组件-全局注册

含义：在任何vue实例下到可以使用

具体语法：

定义Vue.component(组件名称，组件配置对象)
组件配置对象和vue实例配置对象是几乎一样，没有el选项
template选项，声明组件结构的（组件自己的模板）。有且只有一个根标签。必须有这个选项
data选项，必须指定一个函数，函数的返回对象是用来声明数据的

使用组件：

在vue实例管理的视图中#app，把组件名字当中一个标签来使用，组件的名字不能用原生的标签来命名
例如：div span a article footer header section...原生标签

演示代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>

     <div id="app">
        <btn-add></btn-add>
     </div>

    <div id="app2">
        <btn-add></btn-add>
     </div>

   <script src="./vue.js"></script>
   <script>
    
   //全局注册
    Vue.component('btn-add',{
        //这是一个字符串，模板字符串的原因是：可换html的结构清晰写
        //细节：需要有且只有一个根标签
        template:`<div>结果：{{ count }} <button @click="add()">累加</button></div>`,     
        //在组件中data必须是一个函数，返回的对象来声明数据
        data(){
           return{
             count:0
        }
      },
        methods:{
          add(){
            this.count++
        } 
      }
    })

      const vm = new Vue({
        el: '#app',
      })
      const vm2 = new Vue({
        el: '#app2',
      })
  
   </script>

2.组件-局部注册

含义：仅仅在注册组件的当前vue实例管理的视图中才可以使用

具体语法：

语法：new Vue({ components:{组件的名字:组件配置对象}} )
组件配置对象和 vue实例配置对象是几乎一样，没有el选项
template选项，声明组件结构的（组件自己的模板）。有且只有一个根标签。必须有这个选项
data选项，必须指定一个函数，函数的返回对象是用来声明数据的

使用组件:

在vue实例管理的视图中#app，把组件名字当中一个标签来使用，组件的名字不能用原生的标签来命名。

例如：div span a article footer header section ... 原生标签。

演示代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>

  <div id="app">
      <btn-add></btn-add>
    </div>

    <div id="app2">
      <btn-add></btn-add>
    </div>

    <script src="./vue.js"></script>
    <script>
    
      const vm = new Vue({
        el:'#app',
        //局部注册组件
        components:{
         'btn-add':{
           template:'<div>结果：{{count}} <button @click="add()">累加</button></div>',
           data(){
             return {
                 count:0 
             }
           },
             methods:{
              add(){
                this.count++
              } 
           }
         }
       }
        
     })
      const vm2 = new Vue({
           el: '#app2'
      })
   </script>
  </body>
</html>

3.组件-组件嵌套

演示代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>

    <div id="app">
      <com-parent></com-parent>
    </div>
  
    <script src="./vue.js"></script>
    <script>
    // 嵌套：在父组件中使用子组件
    // 局部：局部定义的组件仅仅只能在当前注册的vue实例管理的模板（视图）中使用。
     const vm = new Vue({
         el: '#app',
         components: {
            'com-parent': {
                 template: '<div>我是父组件 <com-child></com-child></div>',
                 components:{
                    'com-child':{
                       template:'<div>我是子组件</div>'
                    },
                 }
              }
           }
        })
      </script>
    </body>
</html>

要努力奋斗鸭

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
组件-全局/局部注册

例如：div span a article footer header section ... 原生标签。在vue实例管理的视图中#app，把组件名字当中一个标签来使用，组件的名字不能用原生的标签来命名。含义：仅仅在注册组件的当前vue实例管理的视图中才可以使用。含义：在任何vue实例下到可以使用。
复制链接

扫一扫