VUE元件傳值案例講解

好吧我承認我疏忽了，我一直以為我的部落格是將vue的一些常見操作全部寫完了的，但是直到我寫元件的時候突然想起來看一下自己寫的部落格是不是有問題的才發現，元件之間的傳值竟然一直沒動過，好吧，我承認我自卑，我真的很怕黑，每當夜晚來臨的時候我都很狼狽…咳咳，放錯了，不好意思，我承認我忘了，我真的很勞累，每當粉絲問問題的時候我都慌的一批(以為**又又又又誤人子弟了)…嚇得我趕緊寫個例子給你們，開整…

沒寫之前呢先搞明白乙個問題，元件引用的時候到底誰是老子，誰是兒子，被打的是兒子，打人的老子，記住這個就可以了，被引入的是兒子，引入他的是老子，也就是說我們一般寫公共元件的時候都是在寫子元件，父元件是呼叫這些子元件的。

"title"

:visible.sync=
"opencurrdialog"
:width=
"options.width"
:before-close=
"_closecurrdialog"
>
}<
/span>
<
/el-dialog>
<
/div>
<
/template>
export
default
,      opencurrdialog:
,      options:}}
,      msg:},
data()
},methods:}}
<
/script>
<
/style>這個時候我們只需要看誰需要用到它

>

"statusdialog = true"

>

開啟dialog

<

/el-button>

"msg"

:title=

"title"

:options=

"curroptions"

:opencurrdialog=

"statusdialog" @_closeit=

"_closecurrdialog"

>

<

/commondialog>

<

/el-card>

<

/div>

<

/template>

import commondialog from

"../commoncomponents/commondialog.vue"

export

default

,data()

}}, methods:

val* @function _closecurrdialog 關閉當前dialog

/**

* @prod 這裡定義的函式名字是子元件使用的函式名字，這裡說明一點，如果你給父元件的值是乙個變數也可以直接傳遞

*/_closecurrdialog()

父元件接收子元件的值

/**

* @function _closecurrdialog 關閉當前dialog

* @prod 接收到了子元件的值以後呢，不管是不是有值，我們都不需要重新定義值來接收它，直接在含裡面寫乙個形參就可以了

*/_closecurrdialog

(val)

,

import commondialog from

components:

,

"msg"

:title=
"title"
:options=
"curroptions"
:opencurrdialog=
"statusdialog" @_closeit=
"_closecurrdialog"
>
<
/commondialog>

裡面的所有的：繫結的值都是子元件裡面props定義的，我們看子元件裡props

props:

,      opencurrdialog:
,      options:}}
,      msg:
},

props就當作是傳遞的乙個橋梁就可以，這裡需要注意的乙個點是在props裡面定義的值不要在data裡面定義了，不然會報錯，假設我定義了會如下的錯誤：

翻譯成中華方言就是：資料屬性「msg」已宣告為屬性。改為使用屬性預設值。

細品那麼你想要給子元件的值就正常在父元件的data裡面使用就可以了。這樣你在父元件裡面的操作的資料就可以傳遞給到子元件了！

首先不可否認的是資料驅動和元件化是vue相當牛叉的兩個地方，所以這個要不要學會你們自己品，重要性就不要我說了，這篇文章我會跟進，這篇文章寫的是最基礎的用法，還有很多的高階用法，回頭再更新一篇，我發現我寫的越基礎的東西看的人越多，額，可能是大家都比較注意基礎吧，以後我也盡量寫一些關於元件使用的文章，感謝閱讀！

Vue元件傳值 父子元件傳值

父元件可以引入 使用子元件，從業務上看，該父元件有可能對子元件有個性化需求，為了體現元件的靈活多變，可以通過傳值實現。應用情景 語法 父元件要在子元件標籤上通過屬性值方式傳值 子元件標籤 name value name value name value 子元件標籤 子元件接收並應用值，具體通過pro...

vue 元件傳值 父子元件傳值，兄弟元件傳值

父向子 v bind props 子元件 子元件 props msg props接收 props 驗證 props food接受數值型別的引數，如果不傳入的話預設就是100 food fooe接受物件型別的引數 fooe foof使用乙個自定義的驗證器 foof foog props 是單向繫結的 ...

Vue元件傳值

學習vue的傳值心得，剛入門vue，大佬勿噴，請多多指教。1.父元件傳值子元件 父元件巢狀子元件式，在標籤裡繫結 子元件用props屬性接收 例 父元件傳值，為縮寫，等同於v bind obj item props obj count 子元件接收傳值，可直接使用，但是推薦在下方重新賦值給新變數再使用...