站長資訊網(wǎng)
vue父子組件之間怎么傳值？下面本篇文章帶大家了解一下Vue中父組件以及子組件傳值問題，希望對大家有所幫助！
前言：在一些頁面中不單單的純純的一個vue文件，vue講究組件化開發(fā)，但是一般的肯定會產(chǎn)生交互事件，今天了解了這個傳值，特此的來記錄一下。
一.父組件向子組件傳值
父組件向子組件傳值會用到：Prop，一般的我們需要在子組件中進行相關(guān)的聲明，如下所示：
子組件為HellowWorld.vue
<script>export default { name: 'HelloWorld', //接收的變量 props: { //聲明相關(guān)的類型 msg: String, count:Number, options:[] }, data(){ return{ } }, methods:{ }}</script>
登錄后復制
在父組件App.vue中
<template> <div id="app"> <!-- msg為字符串類型，count為數(shù)字，options為數(shù)組 --> <HelloWorld msg="First App" :count='count' :options="options"/> </div></template><script>//引入組件import HelloWorld from './components/HelloWorld.vue'export default { name: 'App', components: { HelloWorld }, data(){ return{ count:0, options:[], } }, methods:{ }}</script>
登錄后復制
那么在頁面上效果就是：
當然我們也可以寫一些事件來進行動態(tài)的數(shù)據(jù)交互，例如：
二.子組件向父組件傳值
在子組件傳值時會用到$emit，值得注意的是：在子組件傳值時候的方法要與父組件中監(jiān)聽的方法名稱相同，也就是示例中的 listenToChild。 【
