Vue组件间之间传值实力分析

王雪芹
发布: 2020-08-12 11:58:35
原创
1364 人浏览过

在我们入门Vue的时候,不得不提到组件,在某些情况下,组件间需要互相传值,比如父组件需要向子组件传值,子组件需要向父组件传值,那么下面用一个实力来详细说明。

效果:

我们想实现这样一个效果,在输入框输入文字点击提交按钮后,下面会出现对应的输入内容。如果点击某个内容,那么这个内容就消失。

如下图,比如我们在点击2的时候,2就会消失

微信截图_20200811180017.png

分析:

1、首先我们会获取到input的输入内容,把所有输入内容都集合成一个数组,在

  • 循环数据。因为
  • 都是相同的结构,我们可以把
  • 做成一个组件,数组是在父层,定义的
  • 组件是子组件,这就是父组件向子组件传值,把数据传给子组件。

    2、点击

  • 某个选项,该选项会消失。那么
  • 组件会向上通知父组件,当前点击的是哪个,需要父层的数组数据中哪个去掉,这就是子组件向父组件传值。

    登录后复制

    通过代码我们不难发现,子组件向父组件传值主要在这里:

    this.$emit('delete',this.index);
    登录后复制

    另外需要注意到,在Vue中以$开头的都叫做vue的实例属性或者方法,除此之前还需要注意有一些简写,比如是相同的效果。

    相关推荐:《javascript高级教程

    以上就是Vue组件间之间传值实力分析,升职加薪,大家加油!

    以上是Vue组件间之间传值实力分析的详细内容。更多信息请关注PHP中文网其他相关文章!

  • 相关标签:
    来源:php.cn
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn