Vue-元件

可乐去冰多来番茄酱發表於2024-03-22

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

三、單檔案元件

相關文章