vue父子组件传值：props 和$emit

Dear 丶 2023-06-10 06:22 38阅读 0赞

### 引用为父： ###

import eventToolBar from "./eventToolBar";（引用为父，所以这个组件为父组件）

props: \["page", "limit", "status", "deleteids"\],（有props的组件为子组件）

### props:父组件向子组件传值，先在父组件中动态绑定要传的值，（注意：如果传的值是字符串 可以不用加冒号动态绑定），然后在子组件中用props接受传过来的值 ###

1.父组件中：<m-child :msg="'我是父組件傳過來的'" ></m-child>

2.子组件中接收msg:

export default \{

props: \{

msg: \{

type: String,

default: ''

\},

\},

\}

3.子组件中渲染msg:<h5>\{ \{msg\}\}</h5>

或者在父组件中 ：

<event-tool-bar
      @search-result-arr="searchResultArr"
      @loading-list="loadingList"
      :page="page"
      :limit="limit"
      :status="formQuery.status"
      :deleteids="deleteids"
    ></event-tool-bar>

在子组件中:

props: ["page", "limit", "status", "deleteids"],

赋值获取：

eventId: this.$props.deleteids

### $emit:子组件向父组件传值,通过事件触发，先在子组件中注册点击事件，在事件中用 this.$emit('自定义事件名字'，'要传给父组件的内容')，在父组件中接收自定义事件 ###

1.子组件中：注册点击事件<button @click="btnMsg">点我传值给父组件</button>

2.子组件中：

methods: \{

btnMsg()\{

this.$emit('showMsg','我是子组件过来的值')

\}

\}

3.在父组件中接收自定义事件：<m-child @showMsg='showMsg'></m-child>,定义message,在自定义事件中给message赋值 this.message = val

export default \{

data() \{

return \{

message: ''

\}

\},

methods: \{

showMsg(val) \{

this.message = val

\},

\}

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，38人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue:父子组件传值（ props、sync、v-model ）

父子组件props传值子组件通过$emit方法，通过自定义事件的方式将自身的值传递给父组件 // 子组件通过$emit方法，并传入事件名称'change'来触

╰半夏微凉°/ 2024年03月27日 11:29/ 0 赞/ 68 阅读

相关 vue父子组件传值：props 和$emit

引用为父： import eventToolBar from "./eventToolBar";（引用为父，所以这个组件为父组件） props: \["page

Dear 丶/ 2023年06月10日 06:22/ 0 赞/ 39 阅读

相关 Vue父子组件间传值之 props/$emit

示例一：父组件向子组件传值及方法定义父组件： <template> <div> <h2> { {msg}}</

阳光穿透心脏的1/2处/ 2022年12月20日 13:59/ 0 赞/ 189 阅读

相关 Vue3---父子组件传值(子组件使用 emit 传值到父组件)

Vue3中，子组件通过setup函数中的第一个参数值 props 拿到定义的组件参数进行使用。如果要向父组件传参，需要使用setup函数中的第二个参数值 context

た入场券/ 2022年11月05日 12:58/ 0 赞/ 214 阅读

相关 Vue-组件通信-props和$emit

props 用于父传子用法父组件：在子组件标签中自定义一个属性（:content=""）进行传值（content） <D :content="con

待我称王封你为后i/ 2022年10月30日 05:23/ 0 赞/ 201 阅读

相关 vue父子组件传值

作者：小小字符链接：https://www.jianshu.com/p/4f2c0acedb04 來源：简书 1.前言组件是Vue.js最推

悠悠/ 2022年05月27日 10:50/ 0 赞/ 302 阅读

相关 wepy父子组件props传值

WePY中父子组件之间传值依靠props来实现，props对象中声明了我们需要传递的值。传值有两种方式，包括静态传值和动态传值。静态传值父组件向子组件传递常量数据，

ゝ一纸荒年。/ 2022年04月15日 02:29/ 0 赞/ 410 阅读

相关 Vue父子组件传值

Vue父子组件传值：有四种方式：props，ref，emit 和模板传递通信slot 通过props来传值：静态传值就是直接通过props来传递动态传值是通

Dear 丶/ 2022年01月22日 15:15/ 0 赞/ 377 阅读

相关 vue中关于$emit的用法——父子组件传值

参考：[https://blog.csdn.net/sllailcp/article/details/78595077][https_blog.csdn.net_sllailc

客官°小女子只卖身不卖艺/ 2021年11月05日 07:34/ 0 赞/ 419 阅读

相关 vue父子组件传值

父组件 <template> <div> <h1>我是父组件</h1> <hello :msg="ad

小咪咪/ 2021年09月17日 02:04/ 0 赞/ 524 阅读