• 文章
  • 在线工具

vue父子组件通信

vue、组件、通信 推荐 热门
9 22116

父传子

实现原理

通过子组件的props进行参数绑定

示例

  1. <body>
  2. <div id="app">
  3.    <!--v-bind:cname 把父组件的name 值 绑定到topDiv组件中的props数组的cname-->
  4.    <top-div v-bind:cname="name" v-bind:cage="age"></top-div>
  5. </div>
  6. <template id="top-div">
  7.    <div>
  8.        <!--这里使用的是子组件topDiv的props中的key-->
  9.        <h3>{{cname}} - {{cage}}</h3>
  10.    </div>
  11. </template>
  12. <script src="../js/vue.js"></script>
  13. <script>
  14.    const topDiv = {
  15.        template: "#top-div",
  16.        //数组中cname就是一个变量key,在v-bind中进行绑定值;props的值可以是json对象也可以是数组格式;
  17.        // 如果key有驼峰的存在,则在使用组件绑定值的时候用  -  来分隔驼峰字母,如 cName >>  v-bind:c-name
  18.        props: ["cname", "cage"],
  19.    };
  20.    const app = new Vue({
  21.        el: '#app',
  22.        data: {"name": "xiaoming", "age": 14},
  23.        components: {
  24.            "top-div": topDiv
  25.        }
  26.    });
  27. </script>
  28. </body>

子传父

实现原理

通过在子组件中发送自定义事件实现

示例

  1. <body>
  2. <div id="app">
  3.    <!--delivery-event 是自定义事件-->
  4.    <top-div @delivery-event="receive"></top-div>
  5. </div>
  6. <template id="top-div">
  7.    <div>
  8.        <button @click="delivery(user)">子传父事件</button>
  9.    </div>
  10. </template>
  11. <script src="../js/vue.js"></script>
  12. <script>
  13.    const topDiv = {
  14.        template: "#top-div",
  15.        data: function () {
  16.            return {"user": {"name": "小明", "age": 25}};
  17.        },
  18.        methods: {
  19.            delivery: function (item) {
  20.                //$emit发送事件,事件类型叫 delivery-event,这里不支持驼峰
  21.                this.$emit("delivery-event", item);
  22.            }
  23.        }
  24.    };
  25.    const app = new Vue({
  26.        el: '#app',
  27.        components: {
  28.            "top-div": topDiv
  29.        },
  30.        methods: {
  31.            receive: function (item) {
  32.                alert(JSON.stringify(item));
  33.            }
  34.        }
  35.    });
  36. </script>
  37. </body>


评论
或者使用社交账号快捷登录