美文网首页
vue3父组件给子组件传递属性,子组件给父组件发射方法

vue3父组件给子组件传递属性,子组件给父组件发射方法

作者: 兜兜里冒糖糖 | 来源:发表于2022-09-21 13:43 被阅读0次

vue3中有一个setup的函数,这个函数有两个参数,一个时props,一个时context,props就是来获取父组件传递个子组件的属性,context就是上下文的意思,为了方便理解你可以把它理解为vue2中的this,上代码
属性传递:
子组件Demo中


image.png

1中的写法和vue2是一样的,如果你不指定类型,不指定默认值,那么就写成数组的形式,
2中获取传递的属性是在setup中,里面有两个参数,打印props就能获取所有传递过来的属性
父组件中:


image.png
和vue2是一样的写法。只是声明变量的方式不一样,记得一定要return

方法:
子组件Demo中


image.png

第四步 可有可无,最开始的版本中是必须要写的,现在不用写也可以,记住最后一定要return出去,
父组件中


image.png
一定要return

相关文章

  • 弹窗设置(父子传参原理)

    父组件: 1.父组件向子组件传递数据父组件绑定属性,给子组件传递数据子组件通过props接收父组件传递过来的数据子...

  • 父子传参

    父组件 父组件向子组件传递数据 1.父组件绑定属性,给子组件传递数据2.子组件通过props接收父组件传递过来的数...

  • vue组件通信,多种传值方式

    一、父组件给子组件传递值 ①父组件向子组件传值 定义父组件,父组件传递menuList这个数值给子组件 ②子组件通...

  • vue2.0父子组件以及非父子组件通信传参详解

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过pro...

  • vue2.0父子组件以及非父子组件如何通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现父组件: 子组件通过prop...

  • Vue2.0组件之间通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现父组件: 子组件通过prop...

  • 组件之间如何通信

    父组件传递数据给子组件 可以通过props属性来实现 父组件: 子组件 子组件向父组件通信 如果子组件想要改变数据...

  • vue2.0 父子组件传值

    父组件传值给子组件 子组件 子组件通过 props 接收值 父组件 父组件通过标签属性传值 子组件传值给父组件 子...

  • vue组件通信

    父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现父组件://这里必须要用 - 代...

  • vue组件之间的通信

    1.父组件给子组件传递数据 通过v-bind动态绑定父组件中要传递的数据,子组件通过props属性接收父组件传递的...

网友评论

      本文标题:vue3父组件给子组件传递属性,子组件给父组件发射方法

      本文链接:https://www.haomeiwen.com/subject/wbpwortx.html