子传父组件

最新推荐文章于 2024-03-25 13:01:07 发布

jwz934738949

最新推荐文章于 2024-03-25 13:01:07 发布

阅读量342

点赞数

分类专栏： Vue基础

本文链接：https://blog.csdn.net/jwz934738949/article/details/107341137

版权

Vue基础专栏收录该内容

59 篇文章 1 订阅

订阅专栏

在项目开发中，有时会使用子组件中的属性传入父组件中，为了实现这个操作，需要使用$emit()函数，具体步骤如下：

在子组件的methods方法中使用this.$emit('自定义函数名', item)，将item属性发射出去，让父组件去接受;
在父组件中调用子组件，其中使用v-on与之前自定义函数相关联，并且将自定义函数的值传入父组件的函数中，例如：

<cpn @item-click="cpnClick"></cpn>.其中cpnClick虽然没有参数，但是会默认将之前的item值传入；

在父组件中的cpnClick(item)方法中调用item属性，执行相应的操作。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子传父组件</title>
</head>
<body>
<!--父组件模板-->
<div id="app">
  <cpn @increment="change" @decrement="change"></cpn>
  <h2>计数器：{{total}}</h2>
</div>
<!--子组件模板-->
<template id="cpn">
  <div>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>
<script src="js/vue.js"></script>
<script>
  // 子组件
  const cpn = {
    template: '#cpn',
    data() {
      return {
        counter: 0
      }
    },
    methods: {
      increment() {
        this.counter++;
        this.$emit('increment', this.counter);
      },
      decrement() {
        this.counter--;
        this.$emit('decrement', this.counter);
      }
    }
  }

  // 父组件
  const app = new Vue({
    el: '#app',
    data: {
      total: 0
    },
    components: {
      cpn
    },
    methods: {
      change(counter) {
        this.total = counter;
      }
    }
  })
</script>
</body>
</html>

jwz934738949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
子传父组件

在项目开发中，有时会使用子组件中的属性传入父组件中，为了实现这个操作，需要使用$emit()函数，具体步骤如下：在子组件的methods方法中使用this.$emit('自定义函数名', item)，将item属性发射出去，让父组件去接受; 在父组件中调用子组件，其中使用v-on与之前自定义函数相关联，并且将自定义函数的值传入父组件的函数中，例如：<cpn @item-click="cpnClick"></cpn>.其中cpnClick虽然没有参数，但是会默认将之前的item
复制链接

扫一扫

专栏目录