注册组件

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

你可以把想要重复使用的东西定义成组件。组件就是一些自定义的元素,你可以在上面附加一些 Vue 提供的行为。

现在这个在页面上显示的是一个按钮元素 ...上面的样式是一个CSS框架提供的 .. 这个元素用了一个 button 标签 .. 上面还用了几个 css 类 .. 里面包装了按钮上显示的文字 ..

下面我们可以去注册一个按钮组件,可以在本地范围注册,也可以是全局范围注册,先看一下在本地范围注册,本地指的就是某个特定的 Vue 实例 ...

先去定义一下组件的一些选项 ... 添加一个变量 .. 名字是 uiButton .. 它的值是一个对象 .. 里面添加一个 template 属性 .. 它的值是这个组件要使用的模板 ... 一个 button 元素 .. 加上 ui button 这两个 css 类 ... 再添加一个静态的文字 ...

然后在这个 Vue 实例里面 .. 可以添加一个 compoennts 属性,它里面的东西就是在这个实例上可以使用的组件 .. 先是组件的名字,比如 ui-button,这种使用连字符的命名方式叫 kebab-case,肉串形式 ...

它的值是对应的这个组件的一些选项,我们可以使用上面定义的 uiButton 来表示 ...

回到 html 文档 .. 把这个 button 元素替换成刚才我们定义的 ui-button 这个组件 ... 添加一组 ui-button 标签 ...

页面上同样会显示一个有特定样式的按钮 ... 如果在浏览器上安装了 Vue 开发工具,你可以在这里看到页面上使用的 Vue 组件 ... Root 表示应用的根 ... 下面的 UiButton 就是我们定义的组件 ..

这里我们可以再添加两个 ui-button ...

现在页面上会显示三个按钮 ...

在全局范围定义组件可以这样 ... 用一下 Vue 的 component .. 这个方法有两个参数,一个是组件的的元素名字 .. 还有一个参数就是一些选项 ...

比如这个元素的名字可以是 ui-button .. 它的一些相关的选项是一个对象 .. Vue 实例的大部分选项我们也都可以在组件的这个选项里使用 .. 这里我们可以先添加一个 template ... 设置一下这个组件的模板 ..

一组 button 标签上,上面有两个特定的 css 类 .. 再让它包装一点静态的文字 ..

页面同样会显示一些有特定样式的按钮 ... 在全局范围上定义的组件可以在任意的 Vue 实例里面使用 ...

注册组件《 Vue.js:组件 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点