VUE学习2-组件

组件可以理解为是封装可重用结构的代码。通常包含dom结构、JS逻辑和css样式。Vue中定义组件有两种方式:全局组件和局部组件。

全局组件使用 Vue.component() 进行定义,包括template{}定义组件模版,methods{}定义组件方法,components{}定义局部组件,data{}定义数据。在template{}中定义组件模版时,最外层必须要用根标签来包裹整个模版。例如<div>xxxxx</div>,否则就会报错。


父传子:属性向下传。

子传父:事件向上传。

  1. 子组件methods{}中使用$emit(“fatherTarget”,{ 父组件中的my-event, 数据 })定义触发事件,而数据使用data(){}函数定义。
  2. 在父组件中,配置@my-event=”handleEvent($event)”事件进行接收。
  3. 最后在new Vue({})初始化的methods中定义函数进行子传父。该函数名称与步骤2中的handleEvent相同。

⚠️注意,父子组件的数据不能共享,同时与Vue定义实例不同,在定义组件中data{}必须是一个函数。data函数形式使得被返回的对象在组件重用时均保持独立,不受其中任一一个组件的变化而变化。


同时HTML属性是不区分大小写的,并通常使用短横杠 kebab-case 的形式来表示。<sidebar show-location=”aboutMe”></sidebar>,props中也是使用相同的短横杠来接收父组件的传值 props:[“show-location”] 。而在Vue双括号中,则需要转换成驼峰式 camelCased 写法来获取值。my location is {{showLocation}}。


属性验证:使用props:{myProps: String, myFlag: Boolean}等进行属性验证。支持等有String、Number、Boolean、Array、Object、Function、和不限类型等null。

GitHub link