Vue 父子组件的通信

我就是我 2022-12-10 14:51 293阅读 0赞

# Vue 父子组件的通信 #

vue中 页面又一个个组件组成,小组件组成大组件,那么很多时候,我们都需要让父子组件进行传值

## 一、父组件 传值给 子组件 ##

准备工作

vue实例中的data 中有msg,我们需要把这个 msg传值给 com1

### 1. 通过属性绑定 v-bind: 的方式 ###

1.父组件，可以在引用子组件的时候， 通过 **属性绑定**（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="../../js/vue.js"></script>
    </head>
    <body>
    <div id="app">
        
        <h1>父组件的内容: { { msg}}</h1>
        
        <hr>
        <com1 v-bind:com-msg="msg"></com1>
    </div>
    <template id="com1">
        
        <div>
            <h2>我是子组件</h2>
            传递的信息: <span style="color: red">{ { comMsg}}</span>
        </div>
    </template>
    <script>
        // com1 子组件
        var com1 = { 
            template: "#com1",
            props: { 
                comMsg: { 
                    type: String,  // 指定传值的类型
                    default() {    //默认值
                        return undefined;
                    }
                }
            }
        }
        // 定义的 Vue实例
        var vm = new Vue({ 
            el: "#app",
            data: { 
                msg: "hello--我是父组件"
            },
            methods: { },
            components: { 
                com1
            }
        })
    </script>
    </body>
    </html>

2.在子组件中有个 **props** 属性，该属性中保存的都是 父组件传递给子组件的数据，注意：props 中的数据，都是只读的，无法重新赋值, 但是prop属性可以指定 传值类型和默认值

![image-20200926172703666][]

1.  在子组件中使用 props中的 父组件传给子组件的数据
    
    ![image-20200926172419026][]

在经过执行了完整代码后 ,获取到了父组件的 msg

![image-20200926172827451][]

## 二、子组件 传值给 父组件 ##

准备页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="../../js/vue.js"></script>
    </head>
    <body>
    <div id="app">
        
        <h1>父组件的内容: { { msg}}</h1>
        
        <hr>
        <com1></com1>
    </div>
    <template id="com1">
        
        <div>
            <h2>我是子组件</h2>
        </div>
    </template>
    <script>
        // com1 子组件
        var com1 = { 
            template: "#com1",
            props: { 
                comMsg: { }
            }
        }
        // 定义的 Vue实例
        var vm = new Vue({ 
            el: "#app",
            data: { 
                msg: "hello--我是父组件"
            },
            components: { 
                com1
            }
        })
    </script>
    </body>
    </html>

![image-20200926234445090][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="../../js/vue.js"></script>
    </head>
    <body>
    <div id="app">
        
        <h1>父组件的内容: { { msg}}</h1>
        
        <hr>
        <com1 v-on:func="show"></com1>
    </div>
    <template id="com1">
        
        <div>
            <h2>我是子组件</h2>
            comMsg的值:{ { comMsg}} <br>
            <input type="text" v-model="comMsg">
            <input value="anniu " type="button" @click="myclick(comMsg)"></input>
        </div>
    </template>
    <script>
        // com1 子组件
        var com1 = { 
            template: "#com1",
            props: { 
                comMsg: { }
            },
            methods: { 
                myclick(data){ 
                    this.$emit('func',data);
                }
            }
        }
        // 定义的 Vue实例
        var vm = new Vue({ 
            el: "#app",
            data: { 
                msg: "hello--我是父组件"
            },
            methods: { 
                show(data) { 
                    this.msg = data
                }
            },
            components: { 
                com1
            }
        })
    </script>
    </body>
    </html>

![001][]

这样的话 ,实现了 子组件向父组件传值的操作,但是这样不是很好

![image-20200926235718047][]

翻译一下也就是说 , vue 不提倡我们直接操作父组件的data,而是希望我们用计算属性

### 3.我们再来一个案例 我们也可以实现 将子组件的值给父组件 ###

基础页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
    
    <div id="app">
        
        <cpn @item-click="cpnClick"></cpn>
    </div>
    
    <template id="cpn">
        <div>
            <button v-for="item in games" @click="btnclick(item)">{ { item.name}}</button>
        </div>
    </template>
    <script>
        //子组件
        const cpn = { 
            template: '#cpn',
            data() { 
                return { 
                    message: '你好',
                    games: [
                        { id: '01', name: '刺激战场'},
                        { id: '02', name: '王者荣耀'},
                        { id: '03', name: '阴阳师'}
                    ]
                }
            },
            methods: { 
                btnclick(item) { 
                    // item-click是在父组件on监听的方法
                    // 第二个参数item是需要传的值
                    this.$emit("item-click", item);
                }
            }
        }
        //父组件
        const app = new Vue({ 
            el: '#app',
            data: { },
            components: { 
                cpn
            },
            methods: { 
                cpnClick(item) {    //发送事件,item 就是子组件传过来的值
                    console.log("cpnClick", item)
                }
            },
        })
    </script>
    </body>
    </html>

#### 那么 父组件是怎么进行传递的呢? ####

![image-20200927004051307][]

![image-20200927015033650][]

![002][]

ok…

[image-20200926172703666]: /images/20221123/2788e394baeb43038cfe4e0a605c1d6b.png
[image-20200926172419026]: /images/20221123/b89b2d9183d94b8f800263a907c66333.png
[image-20200926172827451]: /images/20221123/eef9d4bb36664fe0b6d51b3456db2afb.png
[image-20200926234445090]: /images/20221123/55296d9e3f2e421481058eae2936f844.png
[001]: /images/20221123/2a4a10d4626b43b7beb16809cdb38405.png
[image-20200926235718047]: /images/20221123/ce941a157cba49468f1587900f23b596.png
[image-20200927004051307]: /images/20221123/15480ed694ab4114ab86e36a33cd2303.png
[image-20200927015033650]: /images/20221123/bf1a9a4d59db4bf793a01b990c24545c.png
[002]: /images/20221123/f2249fc04965479ab68fc4eb21810205.png