Vue 子组件与父组件通信简单实例及解析_在模板页中编写一个vue组件,能实现与父对象简单交互;-优快云博客

本文链接：https://blog.youkuaiyun.com/pinkoj8k/article/details/116853640

1.效果：

点击按钮实现加减

2.代码及解析

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>组件通信</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--子组件向父组件通信。目标:在子组件中点击对应按钮实现父组件中属性数据的改变-->
<div id="app">
    <h2> num ={{num}} </h2>
    <counter :snum="num" @add="numAdd" @dec="numDec"></counter>
</div>

<script type="text/javascript">
    /*定义一个子组件
    * 2、子组件中应该定义一个data或者计算属性（computed）来修改属性的值
    * 但是，我们不希望使用这种方法，这种方法是改变自身的数据，
    * 我们希望改变父组件的数据，上述方法行不通。
    * 3、通过在父组件中定义方法，
    * 此方法能被子组件调用，来实现数据的修改
    * 4、怎样实现在子组件调用父组件的方法？
    *   （1）首先，父组件有方法。numAdd()
    *   （2）在视图层组件模板中绑定事件（父组件的方法）。@add="numAdd"
    *   （3）在子组件中绑定事件（调用自身的方法，来调用父组件的方法）。@click="incrNum"
    *   （4）子组件创建方法，这些方法调用父组件。incrNum()
    *       @emit()可以出发，可以触发当前实例定义的属性
    *
    * 总结：1、流程：
    *       （1）点击+/-(子组件模板中定义的+/-按钮),
    *       （2）触发子组件模板中定义的方法,
    *       （3）触发子组件methods中定义的方法,
    *       （4）触发子组件创建的实例中定义的方法，
    *       （5）触发父组件methods中的方法，
    *
    * */
    const counter={
        template:`
<!--/*vue中不允许模板出现多个根元素*/-->
          <div>
          <button @click="incrNum">+</button>
          <button @click="decrNum">-</button></div>`,
        props:["snum"],
        methods:{
            incrNum(){
                return this.$emit("add");
            },
            decrNum(){
                return this.$emit("dec");
            },
        }
    };

    /*父组件*/
    var app = new Vue({
        el: "#app",
        components:{
            counter:counter
        },
        data: {
            num: 1
        },
        methods:{
            numAdd(){this.num++},
            numDec(){this.num--},
        }
    })
</script>
</body>
</html>