元件間傳遞資訊

父元件到子元件通訊

1 prop

父子元件

父子通訊中最常見的資料傳遞方式就是通過props傳遞資料，就好像方法的傳參一樣，父元件呼叫子元件並傳入資料，子元件接受到父元件傳遞的資料進行驗證使用

props 可以是陣列或物件，用於接收來自父元件的資料。props 可以是簡單的陣列，或者使用物件作為替代，物件允許配置高階選項，如型別檢測、自定義校驗和設定預設值

<

!-- 父元件 --
>
"parentmessage"
>
<
/my-child>
<
/div>
<
/template>
import mychild from
'@components/common/mychild'
export
default
,data()
}}<
/script>

<

!-- 子元件 --
>
}<
/span>
<
/div>
<
/template>
export
default}}
<
/script>

獲取父元件然後使用父元件中的資料（不推薦）

準確來說這種方式並不屬於資料的傳遞而是一種主動的查詢。父元件並沒有主動的傳遞資料給子元件，而是子元件通過與父元件的關聯關係，獲取了父元件的資料。

該方法雖然能實現獲取父元件中的資料但是不推薦這種方式，因為vue提倡單向資料流，只有父元件交給子元件的資料子元件才有使用的許可權，不允許子元件私自獲取父元件的資料進行使用。在父與子的關係中子應當是處於一種被動關係

// 此處的this為子元件例項

this
.$parent

子元件到父元件的通訊主要為父元件如何接受子元件之中的資料。這裡的資料報括屬性和方法（string, number, boolean, object, array, function）

3 自定義元件

專門針對父子元件（爺孫的不合適）。

<

!-- 父元件 --
>
"parentmethod"
>
<
/my-child>
<
/div>
<
/template>
import mychild from
'@components/common/mychild'
export
default
,data()
},methods:)}
}<
/script>

<

!-- 子元件 --
>
子元件<
/h3>
<
/div>
<
/template>
export
default)}
}<
/script>

refs 獲取

可以通過在子元件新增ref屬性，然後可以通過ref屬性名稱獲取到子元件的例項。準確來說這種方式和 this.$parent 一樣並不屬於資料的傳遞而是一種主動的查詢。

盡量避免使用這種方式。因為在父子元件通訊的過程中。父元件是處於高位是擁有控制權，而子元件在多數情況下應該為純檢視元件，只負責檢視的展示和自身檢視的邏輯操作。對外互動的權利應該由父元件來控制。所以應當由父元件傳遞檢視資料給子元件，子元件負責展示。而子元件的對外互動通過$emit觸發父元件中相應的方法，再由父元件處理相應邏輯

<

!-- 父元件 --
>
"child"
>
<
/my-child>
<
/div>
<
/template>
import mychild from
'@components/common/mychild'
export
default
,mounted()
}<
/script>

<

!-- 子元件 --
>
export
default},
methods:}}
<
/script>

react基礎 父子元件傳遞資訊

1.父元件向子元件傳遞資訊 父元件通過屬性向子元件傳值 a 頁面 父元件 b頁面 子元件 2.子元件修改父元件的內容 父元件向子元件傳遞乙個方法，子元件通過接收的方法間接的操作父元件 父元件import react,from react import todoitem from todoitem c...

iframe父子傳遞資訊

1.子向父通訊 parent.html window.addeventlistener message function e child.html window.parent.postmessage 2.父向子通訊 parent.html var myframe document.getelemen...

vue中父子元件傳遞資訊實現

為了能夠在父子元件中實現雙向控制，需要以下的步驟 第一步 子元件中挖坑 1 在需要父元件填充具體內容的地方挖坑，方式為 message 通過slot和name指定坑 第二步 父元件中填坑 具體內容 1 引入子元件作為其中乙個模組 在父元件的script中通過import引入，然後通過componen...