Vue37-非单文件组件

作者 : admin 本文共214个字,预计阅读时间需要1分钟 发布时间: 2024-06-16 共1人阅读

一、组件的两种编写形式:

  • 非单文件组件;
  • 单文件组件。

Vue37-非单文件组件插图

Vue37-非单文件组件插图(1)

二、创建一个组件 

Vue37-非单文件组件插图(2)

Vue37-非单文件组件插图(3) Vue37-非单文件组件插图(4)

2-1、组件中的el

Vue37-非单文件组件插图(5)

组件中不写el,不说为谁服务。

2-2、组件中的data 

Vue37-非单文件组件插图(6)

Vue37-非单文件组件插图(7)

因为对象形式,多处复用的话,有引用关系,改一处,另一处也会变动。

Vue37-非单文件组件插图(8)

Vue37-非单文件组件插图(9)

Vue37-非单文件组件插图(10)

Vue37-非单文件组件插图(11)

Vue37-非单文件组件插图(12) 

三、组件的注册

3-1、局部注册

Vue37-非单文件组件插图(13)

Vue37-非单文件组件插图(14)

Vue37-非单文件组件插图(15) Vue37-非单文件组件插图(16)

template中的内容就是组件的局部html片段!!!

注意,template中的HTML结构要有一个根节点!!!

3-2、全局注册

Vue37-非单文件组件插图(17)

四、使用组件

Vue37-非单文件组件插图(18)

组件的复用,相互之间不影响!!!

Vue37-非单文件组件插图(19)

五、小结:

Vue37-非单文件组件插图(20)

本站无任何商业行为
个人在线分享 » Vue37-非单文件组件
E-->