Vue入门-子组件向父组件通信与父组件调用子组件中的方法

太过爱你忘了你带给我的痛 2021-09-15 14:22 495阅读 0赞

**子组件向父组件通信**

> 子组件的button按钮绑定点击事件,事件方法名为sendToParent(),
> 
> 该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg);
> 
> 在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e),
> 
> 而msg已经在data中声明,其值为”子级消息”,故最终的输出结果为: 展示父级接收到的消息:子级消息

**父组件调用子组件中的方法**

> 点击父组件的button按钮,触发了click事件指向的useChild方法\[该方法的行为是输出”父级消息”\],
> 
> useChild方法在父组件的中的methods中声明,调用子组件中的方法,并传入参数str,即this.$refs.child1.getMsg(str);
> 
> 而getMsg方法已经在子组件的methods中声明,其行为是console.log('子级组件收到父级的内容',str);,
> 
> 所以,最终的输出结果为: 子级组件收到父级的内容 父级消息

**代码示例（结合上面的分析理解代码）**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>子向父通信</title>
        <style>
            #app {
                border: 1px solid blue;
                width: 500px;
                padding: 20px;
                margin: auto;
                border-radius: 8px;
                background: fuchsia;
            }
    
            #wrapper {
                border: 1px solid red;
                width: 400px;
                padding: 20px;
                border-radius: 8px;
                background: yellowgreen;
                margin-top: 20px;
            }
        </style>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    
    <body>
        <div id="app">
            
            <h1>这是父组件</h1>
            <p>展示父级接收到的消息:{
       {msg}}</p>
            <button @click="useChild(szStr)">调用子组件的方法</button>
             
            
            <child @cus-event="doAction($event)" ref="child1"></child>
        </div>
    </body>
    
    </html>
    <template id="child">
        <div id="wrapper">
            
            <h2>这是子组件</h2>
            <button @click="sendToParent">向父组件发消息</button>
        </div>
    </template>
    <script>
        let child = {
            template: '#child',
            data() {
                return {
                    msg: '子级消息'
                };
            },
            methods: {
                sendToParent() {
                    // 子组件只管发送消息，其中cus-event为自定义事件名（事件名不能写成驼峰法,多个单词用-连接），this.msg为要传递的参数。
                    this.$emit('cus-event', this.msg);
                },
                getMsg(str) {
                    console.log('子级组件收到父级的内容', str);
                }
            }
        };
    
        // 注意: .$mount('#app')跟实例内部el: '#app'是等价的
        new Vue({
            data: {
                msg: '',
                szStr:'父级消息'
            },
            components: {
                child
            },
            methods: {
                doAction(e) {
                    console.log(this);
                    console.log(e);
                    this.msg = e;
                },
                useChild(str) {
                    // 调用子组件的方法
                    // console.log(this);
                    // console.log(this.$refs);
                    // this.$refs.child1得到的子组件实例
                    this.$refs.child1.getMsg(str);
                }
            }
        }).$mount('#app');
    </script>

效果图

![70][]

[70]: /images/20210802/bb05c878b8194d268447364defbc7eb7.png