【Vue】Vue 组件的定义及组件之间的通信 - PHP前端

Home > List of blog posts > 【Vue】Vue 组件的定义及组件之间的通信

Blogger Information

Blog 94

fans 0

comment 0

visits 91871

Special Recommendation

More>

Related recommendations

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>

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

【HTML】文档结构与元素，标签，属性的类型

2022-11-27 20:51:59

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

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

1. 组件的注册

总结：

HTML代码实例：

2. 向子组件值参：属性

总结：

HTML代码实例：

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

总结：

HTML代码实例：