props自定义属性,$emit自定义事件,对吗?

props自定义属性,$emit自定义事件,对吗?

props: {

            col: {

                type: String,

                default: '#000'

            }

        }

1、col是自定义的属性名吗?然后调用的时候在引入的那个页面里的标签里写这个属性名并且传入属性值就行了?还是说col就是专门表示颜色的,不能用其他名字呢?

2、type和default是默认的两个表示传入值的类型和默认值的参数,还是随意取的名字呢?

3、怎么判断出来传入的内容就是颜色的呢,根据默认值的类型吗?

4、$emit是自定义事件类型吗?在相应的地方调用this.$emit(自定义事件类型),然后在要调用的地方直接写 @自定义的事件类型 ,就可以触发相应的事件了,对吗?

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,关于同学的疑问,解答如下:

1、col是自定义的名字,不过在子组件使用props接收父组件传递的数据时,要和父组件内的名字保持,如下:

demo10/index.vue:

http://img1.sycdn.imooc.com//climg/5ebe4a1009f1113506670202.jpg

countdown.vue文件:
http://img1.sycdn.imooc.com//climg/5ebe49cd0975e90603690206.jpg

http://img1.sycdn.imooc.com//climg/5ebe49da09804efe06410125.jpg

2、type是参数的类型,default是默认值,这两个单词是固定的,不能更改。以视频中老师讲解的为例:

http://img1.sycdn.imooc.com//climg/5ebe4ac30932305e03560200.jpg

传递的参数的类型是字符串,默认值是黑色。

3、因为代码是我们自己写的,规定这里需要得到的是一个颜色值,所以我们在传递的时候就传递一个颜色。

4、可以这样理解。$emit()方法可以在子组件触发父组件的事件。例如:

在父组件中自定义了一个事件,如下:

http://img1.sycdn.imooc.com//climg/5ebe4fb50990790308580786.jpg

子组件可以通过$emit()触发

http://img1.sycdn.imooc.com//climg/5ebe4fdd09ddb4f605710342.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • Aurora_Meteor 提问者 #1
    第三点,所以说传入什么内容是我们自己定的,判断传入的内容是否符合是根据组件里写的时候那个属性(在这里就是color)来决定的?不是由default里面的内容决定传入什么类型的东西,也不是有什么规定说调用的时候必须传入什么内容对吗?前面那个属性值换成其他内容(比如fontSize之类的)的话,default的默认值和调用的时候传入的属性值也就跟着进行匹配?
    2020-05-15 16:59:17
好帮手慕言 2020-05-15 18:58:08

同学你好,传入的参数的类型是否符合,是根据type属性来决定的。

例如:type的属性值是字符串,那么在传递的传递时,参数类型不是字符串,那么控制台会有报错。

如果没有传递参数,那么会使用default的属性值,例如:没有传递参数
http://img1.sycdn.imooc.com//climg/5ebe743609ede1d706510203.jpg

http://img1.sycdn.imooc.com//climg/5ebe744909a4676202820194.jpg

页面效果:
http://img1.sycdn.imooc.com//climg/5ebe745c092cc6b102420152.jpg

传递什么参数,完全是根据自己的需求来定,例如同学说的字体大小,那么可以参考下方的例子:

父组件:

http://img1.sycdn.imooc.com//climg/5ebe755809e4b15f05320056.jpg

子组件:

http://img1.sycdn.imooc.com//climg/5ebe7584093f73e902980191.jpg

http://img1.sycdn.imooc.com//climg/5ebe758f09dd3b6005210129.jpg

同学可以自己自己写一写例子,会更有利于自己理解。

如果还有其他疑问,建议在问答区重新提问,便于同学后期查找总结

祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师