用户名
密码
侧边栏壁纸
  • 累计撰写 37 篇文章
  • 累计收到 10 条评论

vue子组件向父级(组件)传递数据

龙流
2021-07-09 / 0 评论 / 120 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年07月09日,已超过313天没有更新,若内容或图片失效,请留言反馈。
组件通信

子组件向父组件通信

案例:点击组件按钮,改变父级数据的值

父级数值为:{{num}}


引入子组件

总结:子组件与父组件去通信(传递数据),本质是子组件的方法绑定父组件的方法,通过方法传递参数到父组件的方法,方法返回的对象然后再传递给子组件


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>组件通信</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h2>子组件向父组件通信</h2>
            <b>案例:</b>点击组件按钮,改变父级数据的值
            <h2>父级数值为:{{num}}</h2>
            <hr>
            <b>引入子组件</b>
            <!--在实例中引入方法-->
            <operation @plus="numPlus" @reduce="numReduce" :num="num"></operation>

            <hr>
            <p>总结:子组件与父组件去通信(传递数据),本质是子组件的方法绑定父组件的方法,通过方法传递参数到父组件的方法,方法返回的对象然后再传递给子组件</p>
            <hr>
        </div>
        <script type="text/javascript">

            //定义组件
            const operation = {
                template:`
                    <div>                                   <!--vue模板中不允许同时出现两个根元素-->
                    <button @click="incrNum">+</button>
                    <button @click="decrNum">-</button>
                    </div>
                `,
                props:["num"],
                methods:{
                    //组件方法,去调用父方法实现数据通信
                    incrNum(){
                        return this.$emit("plus");
                    },
                    decrNum(){
                        return this.$emit("reduce");
                    }
                }
            };

            var app = new Vue({
                el:"#app",
                data:{
                    num:0
                },
                //注册组件时:组件的定义要在上面,否则会报错:找不到组件
                components:{
                    operation:operation
                },
                methods:{
                    numPlus(){
                        this.num++;
                    },
                    numReduce(){
                        this.num--;
                    }
                }
            });
            
        </script>
    </body>
</html>
0

评论 (0)

取消