【Vue】關於父子組件之間的傳值問題

一、問題

1.1、環境
電腦環境：Windows 10；
開發工具：IntelliJ IDEA；
數據庫環境：Redis 3.2.100
JDK環境: Jdk1.8；

1.2、問題
父子組件之間,如何傳值呢?
(注意：本文中的中文中括號【】中引用的，一般都是特定不變的值，或者固定名稱，請細品)

二、解答

我們知道,Vue.js定義了父子組件的概念;我們可以通過子組件的屬性(property,vue中簡寫爲props)給子組件傳值;
下面看一個例子:
父組件的HTML:
這裏的data是父組件中的對象；

          <Child :id="data.id" 
          :code= "data.code" 
          :fileList="data.fileList" 
          @listByParams="listByParams">
		 </Child >

父組件的JS:
1.首先,我們要在<script></script>標籤裏導入需要使用的【子組件】:
下面【子組件】的導入，是按照相對路徑導入的；你自己寫，記得不要照抄，自己要修改下面雙引號內的真實路徑的；其次，下面的【Child】是導入的子組件文件的別名，你可以自己起名，但是一旦確定了別名，下面的標籤就要用這個別名，例如，我起的別名叫【Child】，那麼，我再父頁面引用子組件的時候，就必須用<Child></Child>這個標籤；你如果給組件起別名叫【MyChild】，那麼同理，標籤就必須用<MyChild></MyChild>，這裏就不贅述了；

import Child from ".././Child";

2.我們要在【components】區域註冊該組件，我們不是隨便的人，不是什麼阿貓阿狗都可以進我們這個父組件的；這裏的組件名，也要跟你上面起的別名一樣，既然定下來了，就有定下來的意義，不然起了別名不用，那我們爲什麼要起別名呢？

  export default {
    components: {
		Child,
	
	}
}

3.然後，我們需要定義子組件中的屬性；就類似於Java中的定義對象，然後定義對象的成員變量（屬性或方法）；只不過，Vue.js中，變量都是通過【:】來引用的，方法一般都是用【@】符號來引用的；注意，代碼中，如果沒有特別聲明，所有的符號都是英文符號；

          <Child :id="data.id" 
          :code= "data.code" 
          :fileList="data.variables.imgUlrList" 
          @listByParams="listByParams">

		 </Child >

如上面的代碼，因爲我們父組件需要給子組件傳id，code和fileList列表外加一個listByParams的方法，所以，我們要在【子組件】中聲明3個屬性和1個方法；
①、屬性聲明：

// 引入資源
  export default {
    props: {
      id: {
        type: String
      },
      code: {
        type: String
      },
      fileList: {
        type: Array,
        default:()=>{
          return []
        }
      },
   }  
}

當然，你也可以傳一個對象，那麼，你就需要在【子頁面】定義一個data屬性

  export default {
    props: {
      id: {
        type: String
      },
      code: {
        type: String
      },
      fileList: {
        type: Array,
        default:()=>{
          return []
        }
      },
	 data:{
	     type:Object
	     default:(){
			return {}
		}
	}
   }  
}

父組件中可以在Html標籤中通過【:data】來傳整個對象；

          <Child :id = "data.id" 
          :code = "data.code" 
          :fileList = "data.variables.imgUlrList" 
          @listByParams = "listByParams">
		  :data = "data"
		 </Child >

②方法聲明：
方法聲明就在普通的method方法區定義即可；

methods: {
	listByParams(){
	//此處自己寫自己的業務邏輯；	
	}    
}

4、這樣，【父組件】的data一旦發生了變化，就會動態地通過【:】給子組件的屬性傳值，並且滿足出發條件時，動態地通過【@】符號，調用【子組件】的方法；我們關注問題的焦點，就不用放在【動態傳值】這個動作上，而是聚焦在，如何獲取最新的data的即可；這也算是一個從動態到靜態的一個簡化吧；

完畢~

三、總結

Vue.js的傳值，簡化了以往的傳值方式，大家可以對比EasyUI的傳值方式：
【EasyUI】EasyUI 列表頁面中選中一行row，將整行傳到詳情頁面

望細品；

歡迎關注我的
CSDN博客： https://blog.csdn.net/River_Continent
微信公衆號：幕橋社區

知乎：張牧野， https://www.zhihu.com/people/zhang-mu-ye-37-76/activities
簡書： https://www.jianshu.com/u/02c0096cbfd3