Vue.js 组件
组件(Component)是 Vue.js 最强大的功能之一。vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。
组件可以扩展 HTML 元素,封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树
注册一个全局组件语法格式如下
Vue.component(tagName, options)
tagName 为组件名,options 为配置选项。注册后,我们可以使用以下方式来调用组件:
<tagName></tagName>
全局组件
所有实例都能用全局组件。
全局组件实例
注册一个简单的全局组件 runoob,并使用它:
<div id="app"> <runoob></runoob> </div> <script> // 注册 Vue.component('runoob', { template: '<h1>自定义组件!</h1>' }) // 创建根实例 new Vue({ el: '#app' }) </script>
局部组件
我们也可以在实例选项中注册局部组件,这样组件只能在这个实例中使用:
局部组件实例
注册一个简单的局部组件 runoob,并使用它:
<div id="app"> <runoob></runoob> </div> <script> var Child = { template: '<h1>自定义组件!</h1>' } // 创建根实例 new Vue({ el: '#app', components: { // <runoob> 将只在父模板可用 'runoob': Child } }) </script>
组件实例
#组建的创建
Vue.component('Vheader',{ data:function(){ #data必须是函数,必须有return return { } }, template:`<div class="header"> <div class="w"> <div class="w-l"> <img src="./logo.png"/> </div> <div class="w-r"> <button>登录</button><button>注册</button> </div> </div> </div>` })
组件是可复用的Vue实例,并且带有一个名字:在这个例子中是 <Vheader>
。我们可以在一个通过 new Vue
创建的 Vue 根实例中,把这个组件作为自定义元素来使用:
<div id="app"> <Vheader></Vheader> <Vheader></Vheader> </div>
var app = new Vue({ #绑定vue的根元素 el:'#app', data:{ } })