component组件

最新推荐文章于 2024-07-01 21:08:38 发布

棋炜的小宝贝

最新推荐文章于 2024-07-01 21:08:38 发布

阅读量1.4k

点赞数

分类专栏： vue vue.js 文章标签： vue.js components

本文链接：https://blog.csdn.net/XWen_ING/article/details/109532426

版权

vue.js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

什么是组件？

组件(Component)是Vue js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is 特性进行了扩展的原生HTML元素。

所有的Vue组件同时也都是Vue的实例，所以可接受相同的选项对象（除了一些根级特有的选项）并提供相同的生命周期钩子。

vue组件分为：
局部组件：只能在el定义的范围内使用，
全局组件：可以在随意地方使用
父子组件：之间的传值问题。父子（属性通信）、子父（事件触发）、兄弟通信（EventBus）

template:’’ 组件要显示的内容
component('',)　注册组件。
data数据属性：写函数;
接收两个参数：
第一个参数（组件名称）：用来使用的标签
第二个参数（组件的描述对象）：标识要显示

全局组件注册方式：Vue.component(组件名,{方法})
　
定义全局组件

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 2.使用组件  类似html标签 -->
        <my-component></my-component>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    //1.组件名为"conter"; 2.data 写函数; 3.template 写组件的内容（元素和触发的事件）
    Vue.component("my-component",{   
        data:function(){
                return {count:0}
        },
    
        //template 是模板的意思，在 html 里面是一个可以同时控制多个子元素的父元素。在这里定义了组件的内容
        template:`
            <button v-on:click="count++">
                点击计算点击次数：{{count}}次
            </button>
        `,
    });
    var vm = new Vue({
        el: "#app",
        data:{

        },

    })
</script>
</html>

局部组件注册方式，直接在Vue实例里面注册


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <child-component></child-component>
      </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var child={
        
        template:`<button @click='add2'>我是局部组件:{{m2}}</button>`,
       
        data:function(){
            return {m2:1}
        },
        //定义方法
        methods:{
            add2:function(){
                this.m2++
            }
        }
    };
    var vm = new Vue({
        el: "#app",
        components:{
            "child-component":child
        }
  })
</script>
</html>

具名插槽

组件的 template 里面定义好插槽（插座）对于这种有名称的插槽一般我们叫做具名插槽(或者有名插槽)。
对于没有取名称的插槽一般我们叫做匿名插槽（或者叫做 default 默认插槽）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        .p1 {
            font-size: 24px;
        }
    </style>
</head>

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.0.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>

<body>
    <div id="app">
        <vue-pannel>
            <p slot="main">身体信息</p>
            <h3 slot="footer">底部信息</h3>
            <h3 slot="header">头部信息</h3>

            <p>其他的内容，没有任何一个与之对应的具名插槽，则该内容会被放置在 default插槽里面，如果有的 default插槽的话。
             如果在 template 里面没有事先定义好 default 插槽，则该段内容会被丢弃</p>
        </vue-pannel>
    </div>

      
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  //全局组件
    Vue.component('vue-pannel', {
        //组件的 template 里面定义好插槽（插座） 对于这种有名称的插槽一般我们叫做
        // 具名插槽，或者叫做有名插槽。 对于没有取名称的插槽一般我们叫做匿名插槽（或者叫做 default 默认插槽）

        //slot插槽 插座
        template: `
            <div>
            <p style="color:red;font-size:30px;"><b>全局组件</b></p>

            <slot name="header"></slot>
            <slot name="main"></slot>
            <slot name="footer"></slot>

            <slot name="default"></slot>
            <slot></slot>

            </div>
        `,
    });

    
    // 局部组件
    const MyComponent ={
        template: `
            <div>
            <p style="color:red;font-size:30px;"><b>局部组件</b></p>
            
            <slot name="header"></slot>
            <slot name="main"></slot>
            <slot name="footer"></slot>

            <slot name="default"></slot>
            <slot></slot>

            </div>
        `,
    }
    var vm = new Vue({
        el: "#app",
        // 局部组件 需要在Vue实例中注册
        components:{
            "vue-pannel":MyComponent
        }
  })
</script>
</html>