组件的通信props:父组件给子组件用

1,028 阅读2分钟
  • div app是父亲组件, 是子组件,>
  • 在组件中使用props来从父亲组件接收参数,注意,在props中定义的属性,都可以在组件中直接使用。
  • propps来自父亲级别,而组件中的data return的数据就是组件自己的数据;两种作用域就是组件本身,可以在template,computed,methods中直接使用;
  • 可以使用v-bind动态绑定父亲组件来的内容

v-bind使用与否的区别:

使用v-bind,按照数组进行解析,不用则是字符串。

image.png

链接:js.jirengu.com/puyazakase/… js.jirengu.com/tunihoxafo/…

单向数据流中props的两种应用场景

props像一只手一样,用来接收从父亲组件传递过来的数据。 解释:通过props传递数据的是单向的了,也就是父亲组件数据变化时会传递给子组件,但是反过来不行。 目的:尽可能将父子组件解稿。避免子组件无意修改了父亲组件的状态。 应用场景:业务中会经常遇到两种需要改变prop的情况: 一种是父组件传递初始值进来,子组件将它作为初始值保存起来,在自己的作用域下可以随意使用和修改。这种情况可以在组件data内再声明一个数据,引用父组件的prop。 步骤1:注册组件; 2.将父亲组件的数据传递进来,并在子组件中用props接收 3.将传递进来的数据通过初始值保存起来。

第一步:骤注册组件

第二步:将父组件的数据传递进来,并在子组件中用props接收

“div.app”是一个父组件,下面已经定义好了一个子组件“my-component”,用msg把数据传给“my-component”,并在下面的props进行接收

第三步将传递进来的数据通过初始值保存起来,也是在子组件单独的data里面操作,子组件的data与父组件的data实质上一样的,只是子组件里面的必须是方法:要有function,return

在data中如何获取props接收的数据。可以通过this.xxx,直接获取

通过count保存 count:this.msg,因为后期只需要维护count就可以了。

-->

链接:js.jirengu.com/jazuweyolu/…

另一种情况是prop作为需要被转变的原始值传入,这种情况用计算属性就可以了:

1.注册组件 2.将父元素的数据传递斤来,并在子组件中props接收 3.将传递进来的数据通过计算属性重新计算

image.png 链接:js.jirengu.com/jazuweyolu/…