Vue component

简易学习笔记，不涉及组件间数据交互【组件数据传递打算用vuex，另起一个例子】

基本实例 Base Vue Instance

new Vue({
  el : "#root"
})

全局注册实例

Vue.component(tagName, options)

Vue.component('global-child',{
   template : "<h1>this is a global component</h1>"
})

局部注册

let Child = {
   template : '<h1>this is a local component</h1>'
}

注册子组件

new Vue({
  el : "#root",
  components : {
     Child
  }
})

HTML

<div id="root">
  <global-child></global-child>
  <child></child>
</div>

整理成一个文件

//全局组件
Vue.component('global-child',{
   template : "<h1>this is a global component</h1>"
})
// 局部组件
let Child = {
   template : '<h1>this is a local component</h1>'
}
//实例
new Vue({
  el : "#root",
  components : {
     Child  //子组件
  }
})

点此查看效果