Vue2 组件的使用

移动端vantpc端elementUi。

布织锁云

2892人浏览 · 2023-06-05 16:02:56

布织锁云 · 2023-06-05 16:02:56 发布

组件

移动端
vant
pc端
elementUi

组件化

将页面或者功能分为多个块，达到区域块或者功能复用的目的
在这里插入图片描述

html 创建组件（组件入门）

    <!-- app与MyComponent为父子关系 -->
    <div class="app">
        <!-- 4.在Vue实例的作用范围内使用组件 -->
        <!-- 组件名如果是两个单词需要将单词分开用‘-’相连 -->
        <My-Component></My-Component>
        <My-Component></My-Component>
        <My-Component></My-Component>

        <button @click="getAppChildren()">获取app内的所有组件</button>
    </div>

    

    <script>
        // 1.调用Vue.extend()方法创建组件构造器
        let myComponent = Vue.extend({
            template:`
                <div>
                    <h1>我是新创建的组件</h1>
                </div>
            `
        })
        // 2.调用Vue.component(组件名，组件)方法注册组件
        Vue.component('MyComponent',myComponent)


        // 3.创建vue实例
        const vm = new Vue({
            el:'.app',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            }
        })
        // vm实例有$children属性，属性值为app内的所有子组件（不包括button）所组成的真实数组
    </script>

在这里插入图片描述

全局组件

    <!-- app与MyComponent为父子关系 -->
    <div class="app">
        <h1>我是app</h1>
        <!-- 4.在Vue实例的作用范围内使用组件 -->
        <!-- 组件名如果是两个单词需要将单词分开用‘-’相连 -->
        <My-Component></My-Component>
        <My-Component></My-Component>
        <My-Component></My-Component>

        <button @click="getAppChildren()">获取app内的所有组件</button>
    </div>

    <hr>
    <div class="box">
        <h1>我是box</h1>
        <!-- 使用全局组件 -->
        <My-Component></My-Component>
    </div>

    <script>
        // 1.调用Vue.extend()方法创建组件构造器
        let myComponent = Vue.extend({
            template:`
                <div>
                    <h1>我是新创建的组件</h1>
                </div>
            `
        })
        // 2.调用Vue.component(组件名，组件)方法注册全局组件
        Vue.component('MyComponent',myComponent)


        // 3.创建vue实例
        const vm = new Vue({
            el:'.app',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            }
        })
        // vm实例有$children属性，属性值为app内的所有子组件（不包括button）所组成的真实数组

        const vm2 = new Vue({
            el:'.box',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            }
        })
    </script>

在这里插入图片描述

局部组件

    <!-- app与MyComponent为父子关系 -->
    <div class="app">
        <h1>我是app</h1>
        <!-- 4.在Vue实例的作用范围内使用组件 -->
        <!-- 组件名如果是两个单词需要将单词分开用‘-’相连 -->
        <My-Component></My-Component>
        <My-Component></My-Component>
        <My-Component></My-Component>

        <button @click="getAppChildren()">获取app内的所有组件</button>
    </div>

    <hr>
    <div class="box">
        <h1>我是box</h1>
        <!-- 4.在Vue实例的作用范围内使用组件 -->
        <My-Component2></My-Component2>
        <!-- app内的子组件不能在box内使用 -->
        <My-Component></My-Component>
    </div>

    <script>
        // 1.调用Vue.extend()方法创建组件构造器
        let myComponent = Vue.extend({
            template:`
                <div>
                    <h1>我是新创建的组件</h1>
                </div>
            `
        })

        // 2.创建vue实例
        const vm = new Vue({
            el:'.app',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            },
            // 3.创建局部组件，该组件只能在app组件内使用
            components:{
                "MyComponent":myComponent
            }
        })
        // vm实例有$children属性，属性值为app内的所有子组件（不包括button）所组成的真实数组

        // 2.创建vue实例
        const vm2 = new Vue({
            el:'.box',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            },
            // 3.创建局部组件，该组件只能在box组件内使用
            components:{
                "MyComponent2":myComponent
            }
        })
    </script>

在这里插入图片描述

全局组件语法糖

<!-- app与MyComponent为父子关系 -->
    <div class="app">
        <h1>我是app</h1>
        <!-- 3.在Vue实例的作用范围内使用组件 -->
        <!-- 组件名如果是两个单词需要将单词分开用‘-’相连 -->
        <My-Component></My-Component>
        <My-Component></My-Component>
        <My-Component></My-Component>

        <button @click="getAppChildren()">获取app内的所有组件</button>
    </div>

    <hr>
    <div class="box">
        <h1>我是box</h1>
        <!-- 全局组件其他的组件也能用 -->
        <My-Component></My-Component>
    </div>

    <script>
        // 1.全局注册组件语法糖形式
        Vue.component('MyComponent',{
            template:`
                <div>
                    <h1>我是新创建的组件</h1>
                </div>
            `
        })


        // 2.创建vue实例
        const vm = new Vue({
            el:'.app',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            }
        })
        // vm实例有$children属性，属性值为app内的所有子组件（不包括button）所组成的真实数组

        // 2.创建vue实例
        const vm2 = new Vue({
            el:'.box',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            }
        })
    </script>

在这里插入图片描述

局部组件语法糖

    <!-- app与MyComponent为父子关系 -->
    <div class="app">
        <h1>我是app</h1>
        <!-- 4.在Vue实例的作用范围内使用组件 -->
        <!-- 组件名如果是两个单词需要将单词分开用‘-’相连 -->
        <My-Component></My-Component>
        <My-Component></My-Component>
        <My-Component></My-Component>

        <button @click="getAppChildren()">获取app内的所有组件</button>
    </div>

    <hr>
    <div class="box">
        <h1>我是box</h1>
        <My-Component2></My-Component2>
        <!-- app内的子组件不能在box内使用 -->
        <My-Component></My-Component>
    </div>

    <script>
        // 1.创建vue实例
        const vm = new Vue({
            el:'.app',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            },
            // 2.创建局部组件，语法糖形式
            components:{
                "MyComponent":{
                    template:`
                        <div>
                            <h1>我是新创建的组件</h1>
                        </div>
                    `
                }
            }
        })
        // vm实例有$children属性，属性值为app内的所有子组件（不包括button）所组成的真实数组

        // 1.创建vue实例
        const vm2 = new Vue({
            el:'.box',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            },
            // 2.创建局部组件，语法糖形式
            components:{
                "MyComponent2":{
                    template:`
                        <div>
                            <h1>我是新创建的组件</h1>
                        </div>
                    `
                }
            }
        })
    </script>

在这里插入图片描述

组件抽离写法

    <!-- app与MyComponent为父子关系 -->
    <div class="app">
        <h1>我是app</h1>
        <!-- 4.使用组件 -->
        <!-- 组件名如果是两个单词需要将单词分开用‘-’相连 -->
        <My-Component></My-Component>
        <My-Component></My-Component>
        <My-Component></My-Component>

        <button @click="getAppChildren()">获取app内的所有组件</button>
    </div>

    <!-- 1.创建模板（模板不会显示） -->
    <template id="MyComponent">
        <div>
            <h1>我是被抽离的组件</h1>
        </div>
    </template>

    <hr>
    <div class="box">
        <h1>我是box</h1>
        <My-Component2></My-Component2>
        <!-- app内的子组件不能在box内使用 -->
        <My-Component></My-Component>
    </div>

    <script>
        // 2.创建vue实例
        const vm = new Vue({
            el:'.app',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            },
            // 3.使用模板
            components:{
                "MyComponent":{
                    template:'#MyComponent'
                }
            }
        })
        // vm实例有$children属性，属性值为app内的所有子组件（不包括button）所组成的真实数组

        // 2.创建vue实例
        const vm2 = new Vue({
            el:'.box',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            },
            // 3.使用模板
            components:{
                "MyComponent2":{
                    template:'#MyComponent'
                }
            }
        })
    </script>

在这里插入图片描述

组件内数据的使用

    <!-- app与MyComponent为父子关系 -->
    <div class="app">
        <h1>我是app</h1>
        <!-- 4.使用组件 -->
        <!-- 组件名如果是两个单词需要将单词分开用‘-’相连 -->
        <My-Component></My-Component>
        <My-Component></My-Component>
        <My-Component></My-Component>

        <button @click="getAppChildren()">获取app内的所有组件</button>
    </div>

    <!-- 1.创建模板（模板不会显示） -->
    <template id="MyComponent">
        <div>
            <h1>我是被抽离的组件</h1>
            <h3>价格：{{price}}</h3>
        </div>
    </template>

    <hr>
    <div class="box">
        <h1>我是box</h1>
        <My-Component2></My-Component2>
        <!-- app内的子组件不能在box内使用 -->
        <My-Component></My-Component>
    </div>

    <script>
        // 2.创建vue实例
        const vm = new Vue({
            el:'.app',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            },
            // 3.使用模板
            components:{
                "MyComponent":{
                    template:'#MyComponent',
                    data(){         //组件内的data必须为函数，目的是防止数据被其他组件污染，比如在app组件内的三个MyComponent组件，其中一个组件内的数据修改，其他的两个组件数据不会改变
                        return{
                            price:3000          //当前的数据只能在app组件内的MyComponent组件内使用
                        }
                    }
                }
            }
        })
        // vm实例有$children属性，属性值为app内的所有子组件（不包括button）所组成的真实数组

        // 2.创建vue实例
        const vm2 = new Vue({
            el:'.box',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            },
            // 3.使用模板
            components:{
                "MyComponent2":{
                    template:'#MyComponent'
                }
            }
        })
    </script>

在这里插入图片描述

组件值的改变

    <!-- app与MyComponent为父子关系 -->
    <div class="app">
        <h1>我是app</h1>
        <!-- 4.使用组件 -->
        <!-- 组件名如果是两个单词需要将单词分开用‘-’相连 -->
        <My-Component></My-Component>
        <My-Component></My-Component>
        <My-Component></My-Component>

        <button @click="getAppChildren()">获取app内的所有组件</button>
    </div>

    <!-- 1.创建模板（模板不会显示） -->
    <template id="MyComponent">
        <div>
            <h1>我是被抽离的组件</h1>
            <h3>价格：{{price}}</h3>
            <button @click="add()">+</button>

            <button @click="red()">-</button>
            <button @click="getParent()">获取父组件</button>
            <button @click="getRoot()">获取根组件</button>
        </div>
    </template>

    <hr>
    

    <script>
        // 2.创建vue实例
        const vm = new Vue({
            el:'.app',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            },
            // 3.使用模板
            components:{
                "MyComponent":{
                    template:'#MyComponent',
                    data(){         //组件内的data必须为函数，目的是防止数据被其他组件污染，比如在app组件内的三个MyComponent组件，其中一个组件内的数据修改，其他的两个组件数据不会改变
                        return{
                            price:3000          //当前的数据只能在app组件内的MyComponent组件内使用
                        }
                    },
                    methods:{
                        add(){
                            console.dir(this);      //当前调用add方法的MyComponent组件
                            this.price++
                        },
                        red(){
                            this.price--
                        },
                        getParent(){
                            console.dir(this.$parent);      //当前调用add方法的MyComponent组件的父组件，即app组件
                        },
                        getRoot(){
                            console.dir(this.$root);    //当前调用add方法的MyComponent组件的根组件，即app组件
                        }
                    }
                }
            }
        })
        // vm实例有$children属性，属性值为app内的所有子组件（不包括button）所组成的真实数组

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^