父子组件中的通讯-子传父（练习）

最新推荐文章于 2023-04-26 14:52:43 发布

棋王一生

最新推荐文章于 2023-04-26 14:52:43 发布

阅读量244

点赞数

分类专栏：子向父的数据传输文章标签：子组件向父组件传输数据

本文链接：https://blog.csdn.net/weixin_44755244/article/details/103197423

版权

子向父的数据传输专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件中的通讯-子传父（练习）</title>
</head>
<body>
<!--
定义父组件模板
-->
<div id="box">
    <temp @use_add="show_num"
          @use_sub="show_num">

    </temp>
    <h2>这是父组件中的数据{{all_num}}</h2>
    <p>这里成功的将子组件中data（这里是个方法）数据传输到父组件的data中</p>
</div>
<!--
定义子组件
-->
<template id="tem">
    <div>
        <button @click="send_add">+1</button>
        <button @click="send_sub">-1</button>
        <h2>{{count_num}}</h2>
    </div>
</template>
<script src="vue.js"></script>
<script>
    //定义子组件
    const temp ={
        template:"#tem",
        data:function () {
            return{
                count_num:0,
            }
        },
        methods:{
            send_add:function (count_num) {
                this.count_num++,
                this.$emit('use_add',this.count_num)
            },
            send_sub:function (count_num) {
                this.count_num--,
                this.$emit('use_sub',this.count_num)
            }
        }
    }
    //定义父组件
    const app = new Vue({
        el:"#box",
        data:{
            message:"this is no template",
            all_num:0,
        },
        components:{
            temp:temp
        },methods: {
            show_num:function (count_num) {
                this.all_num = count_num
            }
        }
    })

</script>
</body>
</html>