vue 父子通訊 父傳子詳解

2022-06-05 09:48:12 字數 2273 閱讀 8424

元件之間的通訊

元件是vuejs強大的功能,元件例項中的作用域是相互獨立的,這就說明不同元件之間的資料是無法通訊的。根據元件中資料的傳遞方向,可以分為父元件向子元件傳遞資料和子元件向父元件傳遞資料,這是最常見的和最常用的。這兩中傳資料的方向是通過props、$refs和$emit來實現的。

父元件向子元件傳值

props

子元件通過props來接收父元件傳遞過來的資料

props是單向傳遞的,不可逆的。簡單來說就是父子元件之間的資料傳遞相當於自上而下的下水管子,只能從上往下流,不能逆流。(單向資料流)

傳遞方式也是分為兩種的,靜態資料和動態傳遞

父元件

<

l-show-hidden

title

="通用資訊"

:visible

="visible"

>

<

l-input

title

="客戶名稱"

v-model

="accent.custname"

placeholder

="請輸入客戶名稱"

required

/>

<

view

>

<

l-select

:range

='dataitem.industry'

v-model

="accent.industry"

title

="所屬行業"

placeholder

="請選擇..."

/>

view

>

<

l-input

title

="企業性質"

v-model

="accent.company_nature"

placeholder

="請輸入企業性質"

/>

<

l-input

title

="法人姓名"

v-model

="accent.legal_person_name"

placeholder

="請輸入內容"

/>

<

l-input

title

="法人證件號碼"

v-model

="accent.legal_person_certificate_no"

placeholder

="請輸入法人證件號"

/>

<

l-input

title

="組織機構**"

v-model

="accent.organization_code"

placeholder

="請輸入組織機構**"

/>

l-show-hidden

>

子元件

<

template

>

<

view

class

="show-hidden"

>

<

view

class

="title"

@click

="click"

>

<

slot

name

="title"

>}

slot

>

view

>

<

view

class

="content"

v-show

="visible"

>

<

slot

>

slot

>

view

>

view

>

template

>

<

script

>

export

default

, visible:

},methods: }}

script

>

父元件傳給子元件數值,子元件不要對其進行修改,而是需要找個變數將父元件傳遞的數值給賦值過來然後對變數進行操作

子元件通過props選項來宣告乙個自定義的屬性,然後父元件就可以在巢狀標籤的時候,通過這個屬性往子元件傳遞資料了。

Vue資料 父傳子 子傳父 子傳子

父傳子 父元件 template div son fatherage age fathermethod log son div template script import son from son.vue export default methods components script 子元件 t...

父子元件通訊 父傳子props

在父元件與子元件中,為了實現父子元件之間的通訊,需要使用props,來實現父元件中的內容被子元件所使用。在子元件中使用props來進行與父元件之間的通訊。在使用元件時通過繫結props中定義的變數與父元件中的屬性,實現父元件的屬性傳遞到子元件,子元件就可以使用父元件的屬性了。lang en char...

Vue父子傳值 1 父傳子

哇 搞了這麼多天的vue,總是弄不明白vue的父子傳值,今天終於搞清楚了,vue中有三種傳值方法,這裡先說一種 父傳子 這裡我使用vue根元件作為父元素 在父元素中給了乙個名為user的陣列,之後我們要定義乙個子元件 我們定義子元件以後在父元件的根div中新增子元件的模板並且開始傳值 所以我們在子元...