父組件給子組件傳參

父給子傳參的過程非常簡(jiǎn)單,我們?cè)賑reate vue的時(shí)候的模板就已經(jīng)給我們一個(gè)例子了.

在父組件App中 引入HelloWorld子組件,在components中注冊(cè)完畢后.我們給子組件HelloWorld標(biāo)簽 給予一個(gè)自定義屬性msg 并把想給子組件傳的值賦于msg屬性

在子組件中通過props接收,這種props對(duì)象形式的方式可以讓接收值更加的嚴(yán)謹(jǐn).

子組件給父組件傳參

相對(duì)于父給子,子給父就麻煩了不少.核心是this.$emit.

我們要把子組件input框的內(nèi)容傳給父組件,首先用v-model與changeVal雙向綁定.利用watch監(jiān)聽changeVal的變化,一旦發(fā)生變化,利用this.$emit來傳值給父組件,第一個(gè)綠色的childVal是自定義屬性的名稱,后面紅色的是要傳的值.

在子組件在父組件注冊(cè)完畢后,我們?cè)谧咏M件的標(biāo)簽中利用事件和方法的形式來接收值,此時(shí)綁定的事件就是子組件傳過來的childVal,然后為其綁定一個(gè)方法getVal

在method中定義形參msg接收子組件的值,并賦給父組件中的msgVal.