Vue.js中使用components组件的实例讲解

<!--页面模板-->
<template>
  <div> {{msg}}</div>
</template>
<!--JS 模块对象-->
<script>
  export default {
    data () {
      return {msg: 'vue模板页'}
    }
  }
</script>
<!--css样式-->
<style>
</style>

<template>
  <!--3.使用组件标签-->
  <HelloWorld/>
</template>
<script>
  //1.引入组件
  import HelloWorld from './components/HelloWorld.vue'
  export default {
    //2.映射组件标签
    components: {
      HelloWorld
    }
  }
</script>

<Zujian></Zujian>  // html 中可以使用已经定义好的组件

new Vue({
    el:"#root",
    data:{
    ... ...
    },
    components:{     //可以看到 components 是复数形式，说明我们可以在这里面定义多个组件
    Zujian:{         //定义了一个名字为 zujian 的组件  //它是一个对象形式
        template:`<div>定义了一个组件，名字为 zujian </div>`    //组件具体内容
        }
    }
})

Vue.component('Zujian', {    //在 new Vue 之外书写 // script 中书写
  template: `<div>定义了一个组件，名字为 zujian </div> `
})

<Zujian></Zujian>  // html 中可以使用已经定义好的组件

//引入外部组件
<script>
import Zujian from './components/zujian.js'
export default{
    data(){
        return{
            ... ...
        }
    },
    components:{
        Zujian
    }
}
</script>

//外部组件
<template>
    <div>hello world！！！</div>
<template>
<script>
    ... ...
</script>