vue的组件化开发

最新推荐文章于 2024-07-16 15:41:21 发布

忌颓废

最新推荐文章于 2024-07-16 15:41:21 发布

阅读量360

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/weixin_44947339/article/details/108001646

版权

阅读目录

1、注册组件的基本步骤

（1）、组件的使用分成三个步骤：

创建组件构造器
注册组件
使用组件

<div id="app">
    <!-- 3.使用组件 -->
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
</div>
<!-- 不生效 -->
<my-cpn></my-cpn>

<script src="../js/vue.js"></script>
<script>
    //1.创建组件构造器
    const cpnC = Vue.extend({
        template:`
            <div>
                <h2>我是标题1</h2>
                <h2>我是标题2</h2>
                <h2>我是标题3</h2>
            </div>
        `
    })
    //2.注册组件
    Vue.component('my-cpn',cpnC)

    var app = new Vue({
        el:"#app"
    });
</script>

（2）Vue.extend()：

调用Vue.extend()创建的是一个组件构造器。
通常在创建组件构造器时，传入template代表我们自定义组件的模板。
该模板就是在使用到组件的地方，要显示的HTML代码。
事实上，这种写法在Vue2.x的文档中几乎已经看不到了，它会直接使用下面我们会讲到的语法糖，但是在很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。

（3）Vue.component()：

调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
所以需要传递两个参数：1、注册组件的标签名 2、组件构造器

（4）组件必须挂载在某个Vue实例下，否则它不会生效。

2、全局组件和局部组件

当我们通过调用Vue.component()注册组件时，组件的注册是全局的
这意味着该组件可以在任意Vue实例下使用。
如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件

<div id="app">
    <!-- 3.使用组件 -->
    <cpn1></cpn1>
    <cpn2></cpn2><br/>
</div>

<div id="app2">
    <!-- 3.使用组件 -->
    <cpn1></cpn1>
    <cpn2></cpn2>
</div>

<script src="../js/vue.js"></script>
<script>
    //1.创建组件构造器
    const cpnC = Vue.extend({
        template:`
            <div>
                <h2>我是标题1</h2>
                <h2>我是标题2</h2>
            </div>
        `
    })
    //2.1.注册组件(全局组件，意味着可以在多个vue的实例下面使用)
    Vue.component('cpn1',cpnC)

    const app = new Vue({
        el:"#app",
        data:{
            mesage:'hello'
        },
        //2.2.注册局部组件
        components:{
            //cpn是使用组件的标签名
            cpn2:cpnC
        }
    });

    const app2 = new Vue({
        el:"#app2"
    });
</script>

由结果可以知道组件cpn2（局部组件）只有在app实例里起作用，在app2实例里没有起作用，而cpn1（全局组件）都起作用了
在这里插入图片描述

3、组件语法糖（参照上面的例子）

（1）、全局组件注册的语法糖

//1.全局组件注册的语法糖
Vue.component('cpn1',({
    template:`
        <div>
            <h2>我是标题1</h2>
            <h2>我是标题2</h2>
        </div>
    `
 }))

（2）局部组件的语法糖

 components:{
     'cpn2':{
          template:`
               <div>
                   <h2>我是标题1</h2>
                   <h2>我是标题2</h2>
               </div>
           `
	}
}

4、模板的分离写法

Vue提供了两种方案来定义HTML模块内容：

1、 使用<script>标签 
2、 使用<template>标签

<div id="app">
    <!-- 2.使用组件 -->
    <cpn1></cpn1>
    <cpn1></cpn1>
</div>

<!-- 1.script标签，注意：类型必须是text/x-template-->
<!-- <script type="text/x-template" id="cpn">
    <div>
        <h2>我是标题1</h2>
        <h2>我是标题1</h2>
    </div>
</script> -->

<!-- 2.template标签，注意：类型必须是text/x-template-->
<template id="cpn">
    <div>
        <h2>我是标题2</h2>
        <h2>我是标题2</h2>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
    //1.全局组件注册的语法糖
    Vue.component('cpn1',({
        template:'#cpn'
    }))


    const app = new Vue({
        el:"#app",
        data:{
            mesage:'hello'
        }
    });

</script>

5、组件数据的存放位置

组件对象也有一个data属性(也可以有methods等属性，下面我们有用到)
只是这个data属性必须是一个函数
而且这个函数返回一个对象，对象内部保存着数据
Vue组件应该有自己保存数据的地方，而且组件中不能直接访问Vue实例中的data

<div id="app">
    <!-- 使用组件 -->
    <cpn1></cpn1>
    <cpn1></cpn1>
</div>
<!-- template标签，注意：类型必须是text/x-template-->
<template id="cpn">
    <div>
        <h2>{{title}}</h2>
        <h2>我是标题2</h2>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
    //注册组件
    Vue.component('cpn1',({
        template:'#cpn',
        data(){
            return {
                title:'我是组件存放数据的地方'
            }
        }
    }))


    const app = new Vue({
        el:"#app",
        data:{
            mesage:'hello',
            title:'组件中不能访问到Vue实例的我'
        }
    });
</script>

6、组件的data为什么是一个函数

首先，如果不是一个函数，Vue直接就会报错。
其次，原因是在于Vue让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响。

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

<template id="cpn">
    <div>
        <h2>当前计数：{{counter}}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>
<script src="../js/vue.js"></script>
<script>
    //1.第一种
    Vue.component('cpn',({
        template:'#cpn',
        data(){
            return {
                counter:0
            }
        },
        methods:{
            increment(){
                this.counter++
            },
            decrement(){
                this.counter--
            }
        }
    }))


    // 2.第二种（连锁反应，不可取）
    // const obj = {
    //     counter : 0
    // }
    // Vue.component('cpn',({
    //     template:'#cpn',
    //     data(){
    //         return obj
    //     },
    //     methods:{
    //         increment(){
    //             this.counter++
    //         },
    //         decrement(){
    //             this.counter--
    //         }
    //     }
    // }))

    const app = new Vue({
        el:"#app",
        data:{
            mesage:'hello'
        }
    });
</script>

第一种结果：两个组件互补干扰（不同步）
在这里插入图片描述
第二种结果：两个组件相互干扰（同步）

7、父组件和子组件

当子组件注册到父组件的components时，Vue会编译好父组件的模块
该模板的内容已经决定了父组件将要渲染的HTML（相当于父组件中已经有了子组件中的内容了）
cpn1组件是只能在父组件中被识别的。

<div id="app">
    <!-- 3.使用组件 -->
    <cpn2></cpn2>
</div>

<script src="../js/vue.js"></script>
<script>
    //1.创建第一个组件构造器（子组件）
    const cpnC1 = Vue.extend({
        template:`
            <div>
                <h2>我是子组件的内容</h2>
                <h2>我是子组件的内容</h2>
            </div>
        `
    })
  //2.创建第二个组件构造器（父组件）
  const cpnC2 = Vue.extend({
        template:`
            <div>
                <h2>我是父组件的内容</h2>
                <h2>我是父组件的内容</h2>
                <cpn1></cpn1>
            </div>
        `,
        components: {
            cpn1:cpnC1
        }
    })

    //root根组件
    const app = new Vue({
        el:"#app",
        data:{
            mesage:'hello'
        },
        components:{
            cpn2:cpnC2
        }
    });

</script>

在这里插入图片描述

8、父子组件的通信

如何进行父子组件间的通信呢？Vue官方提到

通过props向子组件传递数据
通过事件向父组件发送消息

在组件中，使用选项props来声明需要从父级接收到的数据。
props的值有两种方式：

方式一：字符串数组，数组中的字符串就是传递时的名称。
方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

我们先来看一个最简单的props传递：

<div id="app">
    <!-- 3.通过:cmessage="message"将data中的数据传给props -->
    <cpn :cmessage="message"></cpn>
</div>

<template id="cpn">
    <div>
        <!-- 4.将props的数据显示在子组件里 -->
        <h2>{{cmessage}}</h2>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>

    const app = new Vue({
        el:"#app",
        //1.Vue实例中的data
        data:{
            message:'hello vue'
        },
        components:{
            'cpn': {
                template:'#cpn',
                //2.子组件中的props
                props: ['cmessage']
            }
        }
    });
</script>

9、父组件传子组件（props）的驼峰标识

<div id="app">
    <cpn :c-info="info" :child-my-message="message"></cpn>
</div>

<template id="cpn">
    <div>

        <h2>{{cInfo}}</h2>
        <h2>{{childMyMessage}}</h2>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>

    const cpn = {
        template:'#cpn',
        props:{
            cInfo:{
                type:Object,
                default(){
                    return {}
                }
            },
            childMyMessage:{
                type:String,
                default: ''
            }
        }
    }

    const app = new Vue({
        el:"#app",
        data:{
            info:{
                name:'why',
                age:18,
                height:1.88
            },
            message:'aaaaa'
        },
        components:{
            cpn
        }
    });
</script>

10、子级向父级传递

自定义事件的流程：

在子组件中，通过$emit()来触发事件。
在父组件中，通过v-on来监听子组件事件。

<!-- 父组件模板     -->
<div id="app">
    <!-- 3.使用组件 -->
    <cpn @item-click="cpnClick"></cpn>
</div>

<!-- 子组件模板 -->
<template id="cpn">
    <div>
        <button v-for="item in categories"
         @click="btnClick(item)"> {{item.name}}</button>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>

    //1.子组件
    const cpn = {
        template:'#cpn',
        data() {
            return {
                categories:[
                    {id :'aaa',name:'热门推荐'},
                    {id :'bbb',name:'手机数码'},
                    {id :'ccc',name:'家用家电'},
                    {id :'ddd',name:'电脑办公'}
                ]
            }
        },
        methods:{
            btnClick(item){
                //发射事件,自定义事件
               this.$emit('item-click',item)
            }
        }
        
    }

    //2.父组件
    const app = new Vue({
        el:"#app",
        data:{
            message:'aaaaa'
        },
        components:{
            cpn
        },
        methods:{
            cpnClick(item){
                console.log('cpnClick',item);
            }
        }
    });
</script>