【Vue】Vue 组件的定义及组件之间的通信

Vue 组件的定义及组件之间的通信

1. 组件的注册

总结：

1.挂载点
2.创建VUE组件实例（根组件）
3.创建全局组件
4.声明子组件及孙组件
5.组件与挂载点绑定

HTML代码实例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <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 id="app">
        <!-- 组件挂载 -->
        <greeting />
    </div>
    <script>
        // 应用实例
        const app = Vue.createApp({
            // 根组件配置项
        });
        //   全局组件(父组件)
        //   app.component(组件名称,{组件配置项})
        app.component('greeting', {
            // html模板
            template: `
        <h2>Hello, {{uname}}</h2>
        <button @click='setLike'>点赞 + {{count}}</button>
        <!-- 命名规则: 小驼 -> 肉串 -->
        <my-award v-if='count >= 10' />
        `,
            // 数据
            data() {
                return {
                    uname: '王老师',
                    count: 0,
                };
            },
            // 方法
            methods: {
                setLike() {
                    this.count++;
                },
            },
            // 声明子组件(复数属性)
            components: {
                // 奖励组件
                myAward: {
                    template: `<p>实在太受欢迎了</p>`,
                    data() {
                        return {};
                    },
                    components: {
                        // 声明子的子组件
                        //   userName: 小驼
                        //   last-user-name : 肉串
                    },
                },
            },
        });
        // 根组件实例 (vue应用与挂载点绑定)
        const vm = app.mount('#app');
    </script>
</body>
</html>

2. 向子组件值参：属性

总结：

props:用于接收父组件中传来的参数（用的是自定义属性）

HTML代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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 id="app"></div>
    <!-- 父组件的模板 -->
    <template id="parent">
        <counter uname='admin' email='nx99@qq.com'>
    </template>
    <!-- 子组件模板：必须使用ID选择符 -->
    <template id="child">
        <p>UserName:{{uname}}</p>
        <p>UserEmail:{{email}}</p>
    </template>
    <script>
        const app = Vue.createApp({
            //父组件
            template: `#parent`,
        });
        app.component('counter', {
            //子组件
            // props:用于接收父组件中传来的参数（用的是自定义属性）
            props: ['uname', 'email'],
            template: `#child`,
        })
        const vm = app.mount('#app');
    </script>
</body>
</html>

3. 向父组件值参：自定义事件

总结：

父 -> 子：自定义属性
子 -> 父：自定义事件

HTML代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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>
    <!--
        1. 父 -> 子：自定义属性
        2. 子 -> 父：自定义事件
    -->
    <div id="app">
        <counter @review='review'>
    </div>
    <template id="counter">
        <button @click="count++">点赞 + {{count}}</button>
        <button @click="review()">评论</button>
    </template>
    <script>
        const app = Vue.createApp({
            methods: {
                review(count) {
                    console.log(count);
                    if (count >= 10) {
                        alert('可以下课了');
                    };
                },
            },
        });
        app.component('counter', {
            template: `#counter`,
            data() {
                return {
                    count: 5,
                }
            },
            methods: {
                review() {
                    this.$emit('review', this.count);
                },
            },
        })
        const vm = app.mount('#app');
    </script>
</body>
</html>

Vue 组件的定义及组件之间的通信

1. 组件的注册

总结：

HTML代码实例：

2. 向子组件值参：属性

总结：

HTML代码实例：

3. 向父组件值参：自定义事件

总结：

HTML代码实例：

相关文章