3-Vue-组件的基本用法

局部组件

通过一个对象来描述这个组件

const counter = {
  //模板
  template: `
  <div>counter</div>
  `
}

创建一个实例来注册这个组件

new Vue({
//el：挂载点
  el: "#app",
  //组件,用来注册一个组件counter，components组件的意思
  components:{counter}
})

在上面注册了一个counter组件,且只能在挂载点为app的容器使用这个组件

全局注册

<div id="app">
       <counter/>   
    </div>
    
<div id="root">
        <counter/>     //报错,未在root容器下注册counter
     </div>

这时需要

new Vue({
  el: "#app",
  //组件,用来注册一个组件
  components:{counter}
})；

new Vue({
  el: "#root",
  //组件,用来注册一个组件
  components:{counter}
})

这样太过于繁琐，只需要注册全局counter就能在任意容器下使用counter组件

//组件
const counter = {
  //模板
  template: `
  <div>counter</div>
  `
};
//注册全局组件
Vue.component("counter",counter)
//语法:Vue.component("组件名",组件描述)
new Vue({
  el: "#app",
})

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

组件之间的通讯

const show = {
	template`<h1></h1>`,
	//外部接口
	props:["count"]
	或者
	props:{
     count:{
     type:Number,
     default:-10
     }
}
}