关于自定义组件的问题
来源：2-17 自定义组件（下）
soso_crazy
2019-07-18 16:10:46
<template>
<p :style="{ color: col }">{{ time }}</p>
</template>
<script>
export default {
data() {
return {
time: 10
};
},
mounted() {
let t = setInterval(() => {
this.time--;
if (this.time == 0) {
clearInterval(t);
this.$emit("end");
}
}, 1000);
},
props: {
col: {
type: String,
default: "#000"
}
}
};
</script>
所有的html组件都要放在template标签内吗？
this指向的是谁？
$emit的作用是什么？this.$emit(end) 括号里的end是在使用组件时 @end一致吗？意思是$emit（ending） 那么@ending的意思吗？
props的作用是什么？
如果col：{} 不写type：string可以吗？这是判断col传过来的值一定要是字符串的意思吗？
1回答
-
好帮手慕夭夭
2019-07-18
你好同学，解答如下：
1.没错，所以的html组件都要放在template标签中，并且，template只能包含一个根元素，所以一般都会嵌套一个整体的大div，然后标签和组件都要放在div中。
2.this的情况需要具体代码具体分析，像同学提供的代码中，定时器里面是箭头函数，箭头函数函数体内的this，就是定义时所在的对象，即指向vue实例对象。因为time是vue实例上的数据，所以通过this.time获取这个数据。
自己可以输出看一下哦（因为定时器不断改为time值，time值会变化）
3.$emit作用是让子组件触发父组件的自定义事件。父组件定义了一个方法。
想要在子组件触发这个方法，就要在调用子组件的位置传递一个自定义事件end,这个end事件是我们自己任意起的，所以叫做自定义事件。事件要执行的就是ending（）方法。
子组件就是使用$emit（）来触发从父组件传递的自定义事件end，括号中填写的就是事件名,与@end中end一致。这里没有@ending哦
4.props接收父组件数据。即当父组件给子组件传递数据的时候，子组件使用props接收。例如如下传递了一个col属性
子组件就要在props中接收。可以规定要传递什么类型的，并且可以设置默认值。在props中接收这个数据后，子组件就可以使用啦
5. 这里不写也没有影响。不过因为标签中设置的属性都是字符串类型，所以规定一下它传递字符串类型的更好哦。
祝学习愉快，望采纳。
0
相似问题