vue全局组件的使用和对应事件的处理

最新推荐文章于 2025-03-15 01:00:00 发布

阳光里的我们

最新推荐文章于 2025-03-15 01:00:00 发布

阅读量564

点赞数

分类专栏： vue 文章标签： vue全局组件的使用和对应事件的处理

本文链接：https://blog.youkuaiyun.com/weixin_44748596/article/details/102423693

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Vue中创建和使用全局组件，详细阐述了如何在子组件中引入并设置value值，同时讲解了如何给全局组件添加class样式，并通过props传递自定义属性。此外，还探讨了如何处理全局组件添加的元素事件，以便获取DOM元素的属性。

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

1，通过全局组件，向各个子组件里面创建各自需要的按钮
全局组件又叫公共组件的声明：Vue.component(a,b)参数a是自定义全局组件的名称，参数b是options对象
（1），全局组件的dom元素里添加<slot></slot>标签并给全局组件命名
slot作为承载分发内容的出口

Vue.component('vbtn',{
 // slot作为承载分发内容的出口
 template:`<button>
   <slot></slot>
   </button>`,
   props:['type']
})

（2），给需要的子组件里面添加该全局组件，并写上需要的value值

<vbtn >播放</vbtn>

<vbtn>删除</vbtn>

2,给全局组件创建的元素写class样式
（1），先给子组件里的全局组件Dom元素添加自定义属性（下面添加的是 type=“success” ）

var Vcontent={
     template:`
    <div class='content'>我是内容组件 
        <vbtn type="success" @click.native="show">播放</vbtn>
    </div>
     `,
     methods:{
       show(){
         alert("hello")
       }
     }
   };

（2），在全局组件里面用props接收子组件的自定义属性，然后全局组件就可以用该属性了

Vue.component('vbtn',{
  // slot作为承载分发内容的出口
  template:`<button class="all" :class="type">
    <slot></slot>
    </button>`,
    props:['type']
})

3，通过全局组件添加的元素的事件需要用.native来获取原生dom元素的全局属性

  var Vcontent={
    
     template:`
    <div class='content'>我是内容组件 
        <vbtn type="success" @click.native="show">播放</vbtn>
    </div>
     `,
     methods:{
       show(){
         alert("hello")
       }
     }
   };

下面附上我的源码：
css样式：

 <style>
  *{
    margin:0;
    padding:0;
  }
  .head{
    width: 100%;
    height: 150px;
    background-color: orange;
  }
  .main2{
    width: 100%;
    height: 1000px;
  }
  .aside{
    width: 30%;
    height: 100%;
    float:left;
  
    background-color: aquamarine;
  }
  .content{
    width: 70%;
    height: 100%;
    float:left;
    background-color: pink;
  }
  .all{
    width: 50px;
    height: 30px;
    border:2px solid red;
  }
  .success{
    background-color: blueviolet
  }
  </style>

DOM元素：

 <div id="app"></div>

js编码:

<script>
Vue.component('vbtn',{
  // slot作为承载分发内容的出口
  template:`<button class="all" :class="type">
    <slot></slot>
    </button>`,
    props:['type']
})
  // 声明子组件Vcontent
   var Vcontent={
     template:`
    <div class='content'>我是内容组件 
        <vbtn type="success" @click.native="show">播放</vbtn>
    </div>
     `,
     methods:{
       show(){
         alert("hello")
       }
     }
   };
  //  声明子组件Vaside
   var Vaside={
     template:`
     <div class='aside'>
     我是侧边栏组件
     <vbtn>删除</vbtn>
     </div>
     `
   };
  //  声明子组件Vhead
   var Vhead={
     template:`
     <div class='head'>
     我是头部组件
     <vbtn>按钮</vbtn>
     </div>
     `,
     methods: {
     
     },
   };
   var App={
     data(){
       return{
       }
     },
    //  使用子组件
     template:`
     <div class='main' >
       <Vhead/>
       <div class='main2'>
          <Vaside/>
          <Vcontent />
       </div>
     </div>
     `,
     methods:{
     
     },
    //  挂载子组件
     components:{
      Vhead,
      Vaside,
      Vcontent
     }
   };
 new Vue({
   el:"#app",
   //（使用渲染局部组件App）
   template:`<App></App>`,
  //  挂载局部组件App
   components:{
     App
   }
 })
 </script>