vue 中声明组件有三种方法:通过 vue.component 方法全局注册。在模板中使用已注册的组件,组件名应使用 kebab-case 命名。在当前组件中通过 components 选项局部注册组件。
Vue 中声明组件的方法
1. 组件注册
组件可以使用 Vue.component(name, options)
方法注册。其中,name
是组件名称,options
是组件配置对象,包括 template、data、methods 等属性。
<code class="javascript">// 注册组件 Vue.component('my-component', { template: '<div>这是我的组件</div>' });</code>
2. 模板中声明
已注册的组件可以通过模板标签使用,其中组件名称以 kebab-case 命名。
<code class="javascript">// 模板中使用组件 <template><my-component></my-component></template></code>
3. 局部注册
组件也可以局部注册,只在当前组件中使用。可以使用 components
选项将组件注册到当前组件中。
<code class="javascript">// 当前组件中局部注册组件 export default { components: { 'my-component': { template: '<div>这是我的局部组件</div>' } } };</code>
其他声明方式
除了上述方法外,组件还可以通过以下方式声明:
-
扩展 Vue:使用
extend
方法扩展 Vue 构造函数。 - JSON 对象:以 JSON 对象的形式声明组件。
- 函数:以函数的形式声明组件,返回一个组件配置对象。
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容