3-3.vue的组件component：子组件向父组件传递数据

最新推荐文章于 2024-06-03 22:04:47 发布

堵车了

最新推荐文章于 2024-06-03 22:04:47 发布

阅读量792

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45660035/article/details/111415612

版权

vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

3-3.vue的组件component：子组件向父组件传递数据

子组件向父组件传递数据是通过$emit来实现的，当子组件触发某个事件后就可以通过$emit来发射一个自定义事件，父组件监听到该事件后获取数据

1.代码展示

<body>
  <div id='app'>
    <p>{{fatherTitle}}</p>
    <cpn @childgive='fathershow'></cpn>
  </div>

  <template id='cpn'>
    <div>
      这是组件的数据
      <button @click='btnchild'>用来发射数据</button>
    </div>
  </template>

  <script>

    // 一步到位  
    const cpn = {
      template: "#cpn",
      data() {
        return {
          title: '这是子组件向父组件传递的数据'
        }
      },
      methods: {
        btnchild() {
          this.$emit('childgive', this.title);
        }
      }
    }

    const app = new Vue({
      el: '#app',
      data: {
        fatherTitle: ''
      },
      // 局部注册
      components: {
        cpn
      },
      methods: {
        fathershow(fathershow) {
          this.fatherTitle = fathershow;
        }
      }
    });
  </script>

</body>

2.过程分解

在这里插入图片描述

堵车了

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
3-3.vue的组件component：子组件向父组件传递数据

3-3.vue的组件component：子组件向父组件传递数据子组件向父组件传递数据是通过$emit来实现的，当子组件触发某个事件后就可以通过$emit来发射一个自定义事件，父组件监听到该事件后获取数据1.代码展示<body> <div id='app'> <p>{{fatherTitle}}</p> <cpn @childgive='fathershow'></cpn> </div>
复制链接

扫一扫