var com1 = Vue.extend({
// 通過 template 屬性，指定了組件要展示的HTML結(jié)構(gòu)
               template: '<h3>這是使用 Vue.extend 創(chuàng)建的組件</h3>'
            })

  Vue.component('myCom1', com1)

            Vue.component('mycom2', {
                template: '<div><h3>這是直接使用 Vue.component 創(chuàng)建出來的組件</h3>
<span>123</span></div>'
            })

<template id="tmpl">
            <div>
                <h1>這是通過 template 元素,在外部定義的組件結(jié)構(gòu)</h1>
                <h4>好用,不錯!</h4>
            </div>
        </template>

   Vue.component('mycom3', {
        template: '#tmpl'
    })

<template>
  <div class="hello">
    <ul>
      <li v-for="(user,index) in users" v-bind:key="index">{{ user }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "users",
  props: {
    users: {  //父組件中子標(biāo)簽自定義的名字
      type: Array,
      require: true
    }
  }
}
</script>

<style scoped>
 li{
   list-style-position: inside;
 }
</style>

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Users v-bind:users="users"> </Users>
  </div>
</template>

<script>
import Users from "@/components/users";
export default {
  name: 'App',
  data(){
    return {
      users: ['西安郵電','西安石油','西北政法','西安工業(yè)','西安財經(jīng)']
    }
  },
  components: {
    Users,
  }
}
</script>

<template>
  <header>
    <h1 @click="changeTitle">{{ title }}</h1>
  </header>
</template>
<script>
export default {
  name: "Son",
  data(){
    return {
      title: 'Vue.js Demo'
    }
  },
  methods: {
    changeTitle(){
      this.$emit('titleChanged','西安郵電大學(xué)');
    }
  }
}
</script>

<style scoped>
 h1{
   background-color: greenyellow;
 }
</style>

<template>
  <div id="app">
    <Son v-on:titleChanged="updateTitle"></Son>
    <h2>{{ title }}</h2>
  </div>
</template>
<script>
import Son from "@/components/Son";
export default {
  name: "Father",
  data(){
    return {
      title: '傳遞的是一個值'
    }
  },
  methods: {
    updateTitle(e){
      this.title = e
    }
  },
  components:{
    Son,
  }
}
</script>