【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