一、问题
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