自定义属性
在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版本事件绑定