Lightning中attribute的一些应用场景及父子组件的传值

1.首先建立一个APPLICATION页面,为了引入COMPONENT组件,创建一个COMPONENT内容如下:

Lightning中attribute的一些应用场景及父子组件的传值

其中name属性和type属性必须存在,default属性可选。

name是自己定义的名字,通过{!v.定义的name名}进行展示。

type是类型,包括(String,Number,List,Boolean...等),根据自己需要的定义的内容的类型进行选择

在APPLICATION中引入组件,

                                    Lightning中attribute的一些应用场景及父子组件的传值

Preview如下:

                                     Lightning中attribute的一些应用场景及父子组件的传值

2.通过属性简单实现数据的双向绑定

其中用到了lightning自带的标签input,需要注意的是必要有label属性(可以为空),否者无法实现双向绑定效果

代码如下:

                    Lightning中attribute的一些应用场景及父子组件的传值

效果如下:

                    Lightning中attribute的一些应用场景及父子组件的传值

3.通过属性实现子组件到父组件的传值:

首先创建一个子组件内容如下:

Lightning中attribute的一些应用场景及父子组件的传值

子组件的触发函数:

                    Lightning中attribute的一些应用场景及父子组件的传值

创建一个Lightning Event文件,起到组件间衔接的作用:

                    Lightning中attribute的一些应用场景及父子组件的传值

                    Lightning中attribute的一些应用场景及父子组件的传值

创建父组件,接收子组件的传值:

 Lightning中attribute的一些应用场景及父子组件的传值

                       Lightning中attribute的一些应用场景及父子组件的传值

之后在APPLICATION中引入父组件,进行展示:

                                                Lightning中attribute的一些应用场景及父子组件的传值

效果如图:

                Lightning中attribute的一些应用场景及父子组件的传值

4.父组件给子组件传值,只需要通过子组件绑定父组件的属性即可,内容如下:

          Lightning中attribute的一些应用场景及父子组件的传值

          Lightning中attribute的一些应用场景及父子组件的传值

通过Preview视图展示:

                                    Lightning中attribute的一些应用场景及父子组件的传值