Vue2.0最基础的组件使用

最新推荐文章于 2024-04-30 08:49:28 发布

DJ欣

最新推荐文章于 2024-04-30 08:49:28 发布

阅读量544

点赞数

分类专栏：学习笔记文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_52479225/article/details/126431430

版权

学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、全局组件与局部组件的认识

    <div id="app">
        <child-comp1></child-comp1>
        <child-comp2></child-comp2>
    </div>
    <div id="app2">
        <child-comp1></child-comp1>
        <!-- <child-comp2></child-comp2> -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
    <script>
        //全局组件：任何一个vue实例当中都可以使用
        Vue.component('ChildComp1', {
            template: '<h2>A child 11111111111!!!</h2>'
        })

        //局部组件：只能在注册它的vue实例中使用
        const app = new Vue({
            el: '#app',
            components: {
                ChildComp2:{
                    template:'<h2>A child 22222222222!!!</h2>'
                }
            },
            data: {

            },
            methods: {

            }
        })
        const app2=new Vue({
            el:'#app2',
            components:{

            },
            data:{

            },methods:{

            }
        })
    </script>

二、使用组件时自定义参数的传递（给子组件传参）

<body>
    <div id="app">
        <child name="zhangsan" age="18"></child>
        <child name="lisi" age="20"></child>
    </div>
    <template id="child">
        <div>
            <h1>你好鸭，我是{{name}},我今年{{age}}岁了</h1>
        </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            components: {
                child: {
                    template: '#child',
                    props: ['name', 'age']
                }
            }
        })
    </script>
</body>

组件和函数类似，可以通过接收参数来是自己具备一定的通用性。函数注册时有形参，函数调用的时候有实参，由此，组件注册的时候也需要决定一下组件的形参，写法上虽略有不同，但核心思想是一样的。通过props，最简单的一种，以数组的方式。接收几个参数，就在数组中添加几个形参名。光有形参是不够的，在使用时需要给一个实参，在标签里加上对应属性即可。

三、组件开始具备一定功能，管理自己的一些状态

以上都是最简单的组件，仅用来了解组件的基本使用方法，当组件具备一些比较复杂的功能，需要管理自己的一些状态时：

<body>
    <div id="app">
        <child name="zhangsan" age="18"></child>
        <child name="lisi" age="20"></child>
    </div>
    <template id="child">
        <div>
            <h1>你好鸭，我是{{name}},我今年{{age}}岁了</h1>
            <p>{{count}}</p>
            <button @click="count++">+++</button>
        </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            components: {
                child: {
                    template: '#child',
                    props: ['name', 'age'],
                    data(){
                        return{
                            count:0,
                        }
                    }
                }
            }
        })
    </script>
</body>

每次使用组件时调用data函数，调用时返回一个对象，使得子组件之间执行自己功能时互不干扰，组件复用时都有自己独立的对象。

data为什么是一个函数而不是对象？

vue组件可能存在多个实例，如果使用对象形式定义data，则会导致它们共用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的；采用函数形式定义，在initData时会将其作为工厂函数返回全新data对象，有效规避多实例之间状态污染问题。而在Vue根实例创建过程中则不存在该限制，也是因为根实例只能有一个，不需要担心这种情况。

四、子组件向父组件传递

首先，在接收方也就是父组件当中定义一个自定义事件；然后，在子组件当中找到合适时机触发父组件中的自定义事件，触发的方式是通过this.$emit('自定义事件'，'传递内容')；接收通过在自定义事件的处理函数当中用形参接住就可以了。

<body>
    <div id="app">
        <child name="zhangsan" age="18" @response="(msg)=>child1=msg"></child>
        <p>{{child1}}</p>
        <child name="lisi" age="20" @response="(msg)=>child2=msg"></child>
        <p>{{child2}}</p>
    </div>
    <template id="child">
        <div>
            <h1>你好鸭，我是{{name}},我今年{{age}}岁了</h1>
            <p>{{count}}</p>
            <button @click="count++">+++</button>
            <button @click="send">send</button>
        </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            components: {
                child: {
                    template: '#child',
                    props: ['name', 'age'],
                    data() {
                        return {
                            count: 0,
                        }
                    },
                    computed: {

                    },
                    methods: {
                        send() {
                            //在子组件中向父组件传递信息的方式==>触发父组件中的自定义事件
                            this.$emit('response', this.name)
                        }
                    }
                }
            },
            data: {
                child1: '',
                child2: ''
            },
            methods: {
                //接受子组件传递的信息
                // fn(message) {
                //     this.child1=message
                // }
            }
        })
    </script>
</body>