Vue-元件

Vue 元件

一、概念

Vue基於可以重用、獨立的思想，設計出元件這一概念，元件可以使程式設計師對每個部分進行單獨設計。

如下圖為元件很形象的定義


二、非單檔案元件

1.元件的基礎使用

<div id="root">
  <student></student>
</div>

區域性元件以及註冊

//第一步：建立student元件
const student = Vue.extend({//此處school即為Vue建立的元件
  name:'Student'，//首字母大寫，約定俗成。Vue在用該元件時，會自動將首字母大寫
  template:``,//可以在此處寫簡單的模板
  data(){//元件內的data，是以物件形式儲存的，不可以寫成陣列形式
    return {
      name:"張三"，
      age：19
    }
  },
  methods: {
    
  }
})
new Vue({
  el:'#root',
  data:{
    msg:'你好啊！'
  },
  //第二步：註冊元件（區域性註冊）
  components:{
    student
  }
})

全域性元件以及註冊

<div id="root">
  <hello></hello>
</div>

//第一步：建立hello元件
const hello = Vue.extend({
  template:`
				<div>	
					<h2>你好啊！{{name}}</h2>
				</div>
			`,
  data(){
    return {
      name:'Tom'
    }
  }
})

//第二步：全域性註冊元件
Vue.component('hello',hello)

new Vue({
  el:'#root2',
})

2.元件的巢狀

<script type="text/javascript">
 Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。

//定義student元件
const student = Vue.extend({
  name:'student',
  template:`
				<div>
					<h2>學生姓名：{{name}}</h2>	
					<h2>學生年齡：{{age}}</h2>	
				</div>
			`,
  data(){
    return {
      name:'尚矽谷',
      age:18
    }
  }
})

//定義school元件
const school = Vue.extend({
  name:'school',
  template:`
				<div>
					<h2>學校名稱：{{name}}</h2>	
					<h2>學校地址：{{address}}</h2>	
					<student></student>
				</div>
			`,
  data(){
    return {
      name:'尚矽谷',
      address:'北京'
    }
  },
  //註冊元件（區域性）
  components:{
    student
  }
})

//定義hello元件
const hello = Vue.extend({
  template:`<h1>{{msg}}</h1>`,
  data(){
    return {
      msg:'歡迎來到尚矽谷學習！'
    }
  }
})

//定義app元件
const app = Vue.extend({
  template:`
				<div>	
					<hello></hello>
					<school></school>
				</div>
			`,
  components:{
    school,
    hello
  }
})

//建立vm
new Vue({
  template:'<app></app>',
  el:'#root',
  //註冊元件（區域性）
  components:{app}
})
</script>

3.重要的內建關係

VueComponent.prototype.proto === Vue.prototype

三、單檔案元件