1. 首页
  2. 文章中心
  3. # Vue

10-组件化开发

112 阅读 0 评论
我是靠谱客的博主 义气豌豆，最近开发中收集的这篇文章主要介绍10-组件化开发，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

01-组件化的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    //3.使用组件显示HTML代码
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    //1.创建组件构造器对象
    const cpnC = Vue.extend({
        template: `
            <div>
                <h2>我是标题</h2>
                <p>我是内容，哈哈</p>
                <p>我是内容，呵呵</p>
            </div>`
    });

    //2.注册组件(全局组件)
    Vue.component('my-cpn', cpnC)

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀'
        },
    })
</script>
</script>
</body>
</html>

02-全局组件和局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
</div>

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

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    //1.创建组件构造器对象
    const cpnC = Vue.extend({
        template: `
            <div>
                <h2>我是标题</h2>
                <p>我是内容，哈哈</p>
                <p>我是内容，呵呵</p>
            </div>`
    });

    //2.注册组件(全局组件：意味着可以在多个Vue的实例下面使用)
    // Vue.component('cpn', cpnC)
    //疑问：怎么注册的组件才是局部组件了？

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀'
        },
        components: {
            //cpn使用组件时的标签名(局部组件)
            cpn: cpnC
        }
    })

    const app2 = new Vue({
        el: '#app2'
    })
</script>
</script>
</body>
</html>

03-父组件和子组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <cpn2></cpn2>
    <hr>
    <cpn1></cpn1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //1.创建第一个组件构造器(子组件)
    const cpnC1 = Vue.extend({
        template: `
           <div>
             <h2>我是标题1</h2>
             <p>我是内容，哈哈</p>
           </div>`
    });

    //2.创建第二个组件构造器(父组件)
    const cpnC2 = Vue.extend({
        template: `
          <div>
          <h2>我是标题2</h2>
          <p>我是内容，呵呵</p>
          <cpn1></cpn1>
          </div>`
        ,
        components: {
            cpn1: cpnC1,
        }
    });

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀'
        },
        components: {
            cpn1: cpnC1,
            cpn2: cpnC2,
        }
    })
</script>
</script>
</body>
</html>

04-组件的语法糖注册方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <cpn></cpn>
    <cpn2></cpn2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //1.创建组件构造器对象
    /*const cpnC = Vue.extend({
        template: `
            <div>
                <h2>我是标题</h2>
                <p>我是内容，哈哈</p>
                <p>我是内容，呵呵</p>
            </div>`
    });
    //2.注册组件(全局组件)
    Vue.component('my-cpn', cpnC)*/

    //3.全局组件注册的语法糖
    Vue.component('cpn', {
        template: `
            <div>
                <h2>我是标题</h2>
                <p>我是内容，哈哈</p>
                <p>我是内容，呵呵</p>
            </div>`
    })

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀'
        },
        //2.注册局部组件的语法糖
        components: {
            'cpn2': {
                template: `
                    <div>
                        <h2>我是标题</h2>
                        <p>我是内容，哈哈</p>
                        <p>我是内容，呵呵</p>
                    </div>`
            }
        }
    })
</script>
</script>
</body>
</html>

05-组件模板的分离写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <cpn></cpn>
    <cpn></cpn>
</div>

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

<!--2.template标签-->
<template id="cpn">
    <div>
        <!--错误：组件不能访问Vue实例数据title-->
        <h2>{{title}}</h2>
        <p>我是内容，呵呵</p>
    </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //1.注册一个全局组件
    Vue.component('cpn', {
        template: '#cpn',
        data() {
            return {
                title: 'abc'
            }
        }
    })

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀',
            title: '我是标题',
        },
    })
</script>
</script>
</body>
</html>

06-组件中的data为什么是函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <cpn></cpn>
    <cpn></cpn>
</div>

<template id="cpn">
    <div>
        <h2>当前计数：{{counter}}</h2>
        <button @click="increment">+</button>
        <button @click="decrement" :disabled="counter<1">-</button>
    </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //1.注册一个全局组件
    const obj = {
        counter: 0
    }
    Vue.component('cpn', {
        template: '#cpn',
        /*data() {
            return {
                counter: 0,
            }
        },*/
        data() {
            return obj;
        },
        methods: {
            increment() {
                this.counter++;
            },
            decrement() {
                this.counter--;
            },
        }
    })

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀',
        },
    })
</script>
</script>
</body>
</html>

07-组件通信-父组件向子组件传递数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--<cpn v-bind:cmovies="movies" :cmessage="message"></cpn>-->
    <cpn :cmovies="movies" :cmessage="message"></cpn>
</div>

<template id="cpn">
    <div>
        <ul>
            <li v-for="item in cmovies">{{item}}</li>
        </ul>
        <h2>{{cmessage}}</h2>
    </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //父传子：props的两种写法
    const cpn = {
        template: '#cpn',
        // props: ['cmovies', 'cmessage'],
        props: {
            //1.类型限制
            /*cmovies: Array,
            cmessage: String,*/
            //2.提供一些默认值以及必传值
            cmessage: {
                //类型
                type: String,
                //默认值
                default: 'aaa',
                //在required为true时，cmessage属性值是必传的
                required: true,
            },
            //类型对象为数组时：默认值必须是一个函数
            cmovies: {
                type: Array,
                // default: []//2.5.3以下都不会错，
                default() {
                    return []
                }
            }
        },
        data() {
            return {}
        },
        methods: {}
    }

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀',
            movies: ['海贼王', '火影忍者', '海尔兄弟']
        },
        components: {
            /*属性增强写法：'cpn':cpn*/
            cpn
        }
    })
</script>
</script>
</body>
</html>

08-组件通信-父传子(props中额驼峰标识)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <cpn :c-info="info" :child—my-message="message"></cpn>
</div>

<template id="cpn">
    <h2>{{cInfo}}</h2>
    <h2>{{childMyMessage}}</h2>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const cpn = {
        template: '#cpn',
        props: {
            cInfo: {
                type: Object,
                default() {
                    return [];
                }
            },
            childMyMessage: {
                type: String,
                default: 'aaa',
            }
        }
    }

    const app = new Vue({
        el: '#app',
        data: {
            info: {
                name: 'gaze',
                age: 18,
                height: 1.84
            },
            message: 'qqq',
        },
        components: {
            /*属性增强写法：'cpn':cpn*/
            cpn
        }
    })
</script>
</script>
</body>
</html>

09-组件通信-子传父(自定义事件)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--父组件模板-->
<div id="app">
    <cpn v-on: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="https://cdn.jsdelivr.net/npm/vue/dist/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: 'qqq',
        },
        components: {
            /*属性增强写法：'cpn':cpn*/
            cpn
        },
        methods: {
            cpnClick(item) {
                console.log('11123', item);
                alert('123142')
            }
        }
    })
</script>
</script>
</body>
</html>

10-组件通信-父子组件通信案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--父组件模板-->
<div id="app">
    <cpn :number1="num1" :number2="num2" @num1change="num1change" @num2change="num2change"></cpn>
</div>

<!--子组件模板-->
<template id="cpn">
    <div>
        <h2>props:{{number1}}</h2>
        <h2>data:{{dnumber1}}</h2>
        <!--<input type="text" v-model="dnumber1">-->
        <input type="text" :value="dnumber1" @input="num1Input">
        <h2>props:{{number2}}</h2>
        <h2>data:{{dnumber2}}</h2>
        <!--<input type="text" v-model="dnumber2">-->
        <input type="text" :value="dnumber2" @input="num2Input">

    </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //1.子组件


    //2.父组件
    const app = new Vue({
        el: '#app',
        data: {
            num1: 1,
            num2: 0,
        },
        methods: {
            num1change(value) {
                this.num1 = parseFloat(value)
            },
            num2change(value) {
                this.num2 = parseFloat(value)
            },
        }
        ,
        components: {
            /*属性增强写法：'cpn':cpn*/
            cpn: {
                template: '#cpn',
                props: {
                    number1: Number,
                    number2: Number,
                },
                data() {
                    return {
                        dnumber1: this.number1,
                        dnumber2: this.number2,
                    }
                },
                methods: {
                    num1Input(event) {
                        //1.将input中的value赋值到dnumber中
                        this.dnumber1 = event.target.value;
                        //2.为了让父组件可以修改值，发出一个事件
                        this.$emit('num1change', this.dnumber1);
                        //3.同时修改dnumber2的值
                        this.dnumber2 = this.dnumber1 * 100;
                        this.$emit('num2change', this.dnumber2);

                    },
                    num2Input(event) {
                        this.dnumber2 = event.target.value;
                        this.$emit('num2change', this.dnumber2);
                        //3.同时修改dnumber2的值
                        this.dnumber1 = this.dnumber2 / 100;
                        this.$emit('num1change', this.dnumber1);
                    }
                }
            }
        },

    })
</script>
</script>
</body>
</html>

11-组件通信-父子组件通信案例(watch实现)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--父组件模板-->
<div id="app">
    <cpn :number1="num1" :number2="num2" @num1change="num1change" @num2change="num2change"></cpn>
</div>

<!--子组件模板-->
<template id="cpn">
    <div>
        <h2>props:{{number1}}</h2>
        <h2>data:{{dnumber1}}</h2>
        <input type="text" v-model="dnumber1">

        <h2>props:{{number2}}</h2>
        <h2>data:{{dnumber2}}</h2>
        <input type="text" v-model="dnumber2">


    </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //1.子组件


    //2.父组件
    const app = new Vue({
        el: '#app',
        data: {
            num1: 1,
            num2: 0,
        },
        methods: {
            num1change(value) {
                this.num1 = parseFloat(value)
            },
            num2change(value) {
                this.num2 = parseFloat(value)
            },
        }
        ,
        components: {
            /*属性增强写法：'cpn':cpn*/
            cpn: {
                template: '#cpn',
                props: {
                    number1: Number,
                    number2: Number,
                },
                data() {
                    return {
                        dnumber1: this.number1,
                        dnumber2: this.number2,
                    }
                },
                watch: {
                    dnumber1(newValue) {
                        this.number2 = newValue * 100;
                        this.$emit('num1change', newValue);
                    },
                    dnumber2(newValue) {
                        this.number1 = newValue / 100;
                        this.$emit('num2change', newValue);
                    }
                }
            }
        }
    })
</script>
</script>
</body>
</html>

12-组件访问-父访问子-children-refs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--父组件模板-->
<div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn ref="aaa"></cpn>
    <button @click="btnClick">按钮</button>
</div>

<!--子组件模板-->
<template id="cpn">
    <div>我是子组件</div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //1.子组件

    //2.父组件
    const app = new Vue({
        el: '#app',
        data: {},
        methods: {
            btnClick() {
                //1.$children
                /*console.log(this.$children)
                for (let c of this.$children) {
                    console.log(c.name);
                    c.showMessage();
                }
                console.log(this.$children[3].name);*/

                //2.$refs => 对象类型，默认是一个空的对象 ref = 'bbb'
                console.log(this.$refs.aaa.name)
            }
        },
        components: {
            cpn: {
                template: '#cpn',
                data() {
                    return {
                        name: '我是子组件的name'
                    }
                },
                methods: {
                    showMessage() {
                        console.log('showMessage');
                    }
                }
            }
        }
    })
</script>
</script>
</body>
</html>

13-子访问父-parent-root

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--父组件模板-->
<div id="app">
    <cpn></cpn>
</div>

<!--子组件模板-->
<template id="cpn">
    <div>
        <h2>我是cpn组件</h2>
        <ccpn></ccpn>
    </div>
</template>

<template id="ccpn">
    <div>
        <h2>我是子组件</h2>
        <button @click="btnClick">按钮</button>
    </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //1.子组件

    //2.父组件
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀！'
        },
        components: {
            cpn: {
                template: '#cpn',
                data() {
                    return {
                        name: '我是cpn组件的name'
                    }
                },
                components: {
                    ccpn: {
                        template: '#ccpn',
                        methods: {
                            btnClick() {
                                //1.访问父组件$parent
                                // console.log(this.$parent)
                                // console.log(this.$parent.name)

                                //2.访问根组件$root
                                console.log(this.$root);
                                console.log(this.$root.message);
                            }
                        },
                    },
                }
            }
        }
    })
</script>
</script>
</body>
</html>

最后

以上就是义气豌豆为你收集整理的10-组件化开发的全部内容，希望文章能够帮你解决10-组件化开发所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(74)

相关文章

剑指 Offer 56 - I. 数组中数字出现的次数python
剑指 Offer 56 - I. 数组中数字出现的次数python
python找出序列中出现次数最多的元素之Counter对象
python找出序列中出现次数最多的元素之Counter对象
python计算数组中出现的所有元素并统计出现次数
python计算数组中出现的所有元素并统计出现次数
python计算数组元素出现的次数
python计算数组元素出现的次数
10-组件化开发
10-组件化开发
leetcode 面试题56 - I. 数组中数字出现的次数（中等，位运算，python）
leetcode 面试题56 - I. 数组中数字出现的次数（中等，位运算，python）
FPGA入门教程之Quartus软件新建工程步骤（超详细）
FPGA入门教程之Quartus软件新建工程步骤（超详细）
利用Quartus设计4位同步二进制加法计数器
利用Quartus设计4位同步二进制加法计数器

评论列表共有 0 条评论

立即
投稿
返回
顶部