Vue3——组件基础

news2024/11/15 20:14:52

组件基础

1. 组件定义与使用

1.1 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件基础</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div style="border: 1px solid #949494;padding: 20px;margin-top: 10px;">
    <h2>1. 组件定义与使用</h2>
    <!-- 3. 将组件用标签表示 -->
    <div id="app">
        <abc></abc>
        <p>===============================</p>
        <abc></abc>
    </div>

    <script>
        // 1. 定义组件，与定义数据对象的差别是template选项
        const x = {
            data(){
                return{
                    count: 0
                }
            },
            template: `<button @click='count++'>点击{{count}}次</button>`
        }
        
        const app = Vue.createApp({})
        // 将数据绑定到对象中
        app.component('abc',x)
        app.mount('#app')
    </script>
    </div>
</body>
</html>

1.2 效果图

在这里插入图片描述

2. 局部组件与全局组件

2.1 代码

    <div style="border: 1px solid #949494;padding: 20px;margin-top: 10px;">
    <h2>2. 局部组件与全局组件</h2>
    <div id="app2">
        <p>(1)组件counter</p>
        <counter></counter>
        <br><br>
        <p>(2)这个组件中调用全局组件counter</p>
        <my-message></my-message>
    </div>

    <script>
        // 注册组件counter
        const counter = {
            data(){
                return{
                    count: 0
                }
            },
            template: `<button @click="count++">您点击了{{count}}次</button>`
        }

        // 注册组件my-message
        const message = {
            data(){
                return{
                    msg: '第二组件'
                }
            },
            // 在这个组件中调用全局组件counter
            template: `<div border=1>{{msg}}<br><counter></counter></div>`
        }

        // 实例化 放在实例对象里面声明的组件为局部组件
        const app2 = Vue.createApp({
            data(){
                return{
                    msg: 'Vue全局组件与局部组件'
                }
            },
            // 放在实例中的components属性中就是局部组件
            components: {
                'my-message': message
            }
        })
        // 放在实例外面并且用component函数注册的组件就是全局组件
        // 全局组件可以在其他的组件中使用
        app2.component('counter',counter)
        app2.mount('#app2')
    </script>
    </div>

2.2 效果图

在这里插入图片描述

3. 父组件与子组件

3.1 代码

    <div style="border: 1px solid #949494;padding: 20px;margin-top: 10px;">
        <h2>3. 父组件与子组件</h2>
        <div id="app3">
            <my-box></my-box>
        </div>

        <!-- 在A组件里面又嵌套了B组件，A称之为父组件 ，B称之为子组件 -->
        <script>
            const counter3 = {
                data(){
                    return{
                        x: 0
                    }
                },
                template: `<button @click='x++'>单击{{x}}次</button>`
            }

            const box = {
                template: `
                <div style="height: 300px;width: 300px;background: wheat;text-align: center;">
                <counter3></counter3>
                </div>
                `,
                // 将组件counter设置为box组件的子组件
                components: {
                    counter3: counter3
                }
            }

            const app3 = Vue.createApp({})
            app3.component('my-box',box)
            app3.mount('#app3')
        </script>
    </div>

3.2 效果图

在这里插入图片描述

4. 父组件传值给子组件（props属性的使用）

4.1 代码

    <div style="border: 1px solid #949494;padding: 20px;margin-top: 10px;">
        <h2> 4. 父组件传值给子组件(props属性的使用)</h2>
        <div id="app4">
            <!-- 3.属性传值，父组件传值给子组件 -->
            <my-box4 :name="name" :colleges="colleges"></my-box4>
        </div>

        <script>
            const mybox4 = {
                //1.通过props来接收父组件传值
                props: ['name', 'colleges'],
                template: `
                <div>
                    <p>{{name}}</p>
                    <ul>
                        <li v-for="item in colleges">{{item}}</li>
                    </ul>
                </div>
                `
                }

                const app4 = Vue.createApp({
                    // 2.在父组件中设置值
                    data() {
                        return {
                            name: '王五',
                            colleges: ['语文', '数学', '英语', '化学']
                        }
                    },
                    components: {
                    "my-box4": mybox4
                    }
                })
                app4.mount('#app4')
        </script>
    </div>

4.2 效果图

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5. 事件发射：子组件传值给父组件

5.1 代码

    <div style="border: 1px solid #949494;padding: 20px;margin-top: 10px;">
        <h2>5. 事件发射： 子组件传值给父组件</h2>
        <template id="box5">
            <div style="background-color: antiquewhite;width: 200px;height: 200px;">
                <button @click="myfun">点击</button>
              </div>
        </template>

        <div id="app5" style="background-color: rgb(224, 215, 250);width: 300px;height: 300px;padding: 20px;">
            <!-- 4.子组件标签中捆绑事件 -->
            <my-box5 @box-click="boxclick"></my-box5>
        </div>

        <script>
            const mybox5 = {
                template: `#box5`,
                methods: {
                    // 1.子组件定义事件
                    myfun(){
                        const dataobj = {
                            name: '李四',
                            info: 'my name is lisi'
                        }
                        // 2.在子组件中通过$emit方法定义事件发射，第一个参数为事件名，第二参数为数据
                        this.$emit('box-click',dataobj)
                    }
                }
            }

            Vue.createApp({
                //  3.父组件中定义接收事件发射的方法
                methods: {
                    boxclick(data){
                        console.log(data)
                    }
                },
                components: {
                    "my-box5": mybox5
                }
            }).mount('#app5')
        </script>
    </div>