介绍
如何正确的使用Vue组件?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
Vue组件概述
组件是Vue(组件)。js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。根据项目需求,抽象出一些组件,每个组件里包含了展现,功能和样式。每个页面,根据自己所需,使用不同的组件来拼接页面。这种开发模式使前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦。
在Vue里,一个组件本质上是一个拥有预定义选项的一个Vue实例
组件是一个自定义元素或称为一个模块,包括所需的模板,逻辑和样式。在HTML模板中,组件以一个自定义标签的形式存在,起到占位符的功能。通过Vue。js的声明式渲染后,占位符将会被替换为实际的内容
下面是一个最简单的模块示例
& lt; div id=癮pp"比;
& lt;才能xiaohuochai> & lt;/xiaohuochai>
& lt;/div> Vue注册组件
组件注册包括全局注册和局部注册两种
全局注册
要注册一个全局组件,可以使用Vue.component (tagName、期权)
Vue.component (& # 39; my-component& # 39;,, {
,//选项
}) 组件在注册之后,便可以在父实例的模块中以自定义元素& lt; my-component> & lt;/my-component>的形式使用
[注意]要确保在初始化根实例之前注册了组件
& lt; div id=癳xample"比;
,& lt; my-component> & lt;/my-component>
& lt;/div>
& lt; script>//,注册
Vue.component (& # 39; my-component& # 39;,, {
,模板:& # 39;& lt; div> A custom 组件! & lt;/div> & # 39;
})//,创建根实例
Vue ({new
,el: & # 39; #示例# 39;
})
& lt;/script> 局部注册
通过使用组件实例选项组件注册,可以使组件仅在另一个实例/组件的作用域中可用
& lt; div id=癳xample"比;
,& lt; my-component> & lt;/my-component>
& lt;/div>
& lt; script>//,注册
var Child =, {
,模板:& # 39;& lt; div> A custom 组件! & lt;/div> & # 39;
}；//,创建根实例
Vue ({new
,el: & # 39; #示例# 39;
,,组件:{//才能,& lt; my-component>,将只在父模板可用
& # 39;才能my-component& # 39;:孩子
}大敌;
})
& lt;/script> 组件树
使用组件实例选项组件注册,可以实现组件树的效果
& lt; div id=癳xample"比;
,& lt; my-component> & lt;/my-component>
& lt;/div>
& lt; script>//,注册
var headerTitle =, {
,,模板:& # 39;& lt; p>我是标题& lt;/p> & # 39;
}；
var headerContent =, {
,,模板:& # 39;& lt; p>我是内容& lt;/p> & # 39;
}；
var header =, {
模板:大敌;”
,,& lt; div 类=癶d"比;
,,,,,& lt; header-content> & lt;/header-content>
,,,,,& lt; header-title> & lt;/header-title>
,,& lt;/div>
,’,
,,组件:{
& # 39;才能header-content& # 39;:, headerContent,
& # 39;才能header-title& # 39;: headerTitle
,},
}；//,创建实例
Vue ({new
,el: & # 39; #示例# 39;
,,组件:{
& # 39;才能my-component& # 39;:头
}大敌;
})
& lt;/script> 对于大型应用来说,有必要将整个应用程序划分为组件,以使开发可管理。一般地组件应用模板如下所示
& lt; div id=癮pp"比;
,& lt; app-nav> & lt;/app-nav>
,& lt; app-view>
& lt;才能app-sidebar> & lt;/app-sidebar>
& lt;才能app-content> & lt;/app-content>
,& lt;/app-view>
& lt;/div> v-once
尽管在Vue中渲染HTML很快,不过当组件中包含大量静态内容时,可以考虑使用v-once将渲染结果缓存起来
Vue.component (& # 39; my-component& # 39;,, {
,模板:& # 39;& lt; div v-once> hello 世界!……& lt;/div> & # 39;
}) Vue组件的模板分离
在组件注册中,使用模板选项中拼接HTML元素比较麻烦,这也导致了HTML和javascript的高耦合性。庆幸的是,Vue。js提供了两种方式将定义在js中的HTML模板分离出来
脚本
在脚本标签里使用文本/x-template类型,并且指定一个id
& lt; script 类型=拔谋?x-template", id=癶ello-world-template"比;
,& lt; p> Hello Hello hello
& lt;/script>
Vue.component (& # 39; hello-world& # 39;,, {
,模板:& # 39;# hello-world-template& # 39;
})
