自定义属性

在Html中，标签中class、id、src.....等这些写叫做标签中的内置属性。

<h1 id="box"></h1>   id="box" html标签中内置的属性

我们可以为标签自己定义属性，那么这个属性就叫做自定义属性。

<h1 abc="box"></h1>  abc="box" 自定义属性
<Hello abc="box"></Hello>  abc="box" 自定义属性

需要注意的是：在我们自己写的组件中使用标签的内置属性时，此时这些标签的内置属性在这里就变成了自定义标签了。

<Hello id="box"></Hello>  id="box" 自定义属性

当在自己定义的Hello组件中使用id属性时，这里的id这里的id属性就变成了自定义属性，就不在是自定义属性了。

自定义事件

我么都知道什么是点击事件，就是当鼠标点击时会发生响应的事情。

<button onclick="fn">登录</button>   

此时当鼠标点击时事件发生了，就会调用fn函数。此处的onclick原生DOM中的事件绑定。

问：下面的onhello事件属于什么事件？

<button onhello="fn">登录</button>

答：自定义事件。

什么是自定义事件？

自定义事件就是给某个dom注册一个事件，然后派发出一个对应的事件出去 。

上述代码中onhello就是自定义事件，需要我们写代码去触发hello事件 ，在子组件中使用 $emit来触发自定义事件。

function fn(data){
    this.$emit("hello",wangcai)
}

在父组件中写如下代码：

<button @click="fn">登录</button>    @click="fn" 叫vue帮我们封装的事件绑定  vue版本事件绑定
<Son @eat="fn">登录</Son>   @eat="fn" 叫vue版本的自定义事件
    
<Son @click="fn">登录</Son>   @click="fn" 叫vue版本的自定义事件

在子组件中写如下代码：

<button @click="fn">登录</button>    @click="fn" 叫vue帮我们封装的事件绑定  vue版本事件绑定