组件
一.組件的概念
1.組件
組件，是對數(shù)據(jù)和方法的簡單封裝。組件可以有自己的屬性和方法。屬性是組件數(shù)據(jù)的簡單訪問者。方法則是組件的一些簡單而可見的功能。
使用組件可以實現(xiàn)拖放式編程、快速的屬性處理以及真正的面向?qū)ο蟮脑O(shè)計。
2.vue中的組件
組件（Component）是 Vue.js 最強大的功能之一。
組件可以擴展 HTML 元素，封裝可重用的代碼。
組件系統(tǒng)讓我們可以用獨立可復用的小組件來構(gòu)建大型應(yīng)用，幾乎任意類型的應(yīng)用的界面都可以抽象為一個組件樹：
-
組件化開發(fā)，類似于模板化開發(fā)，但是并不等同于模板化開發(fā)
- 組件化開發(fā)，包括頁面，樣式，行為（業(yè)務(wù)邏輯）
- 模塊化開發(fā)，只包括行為（業(yè)務(wù)邏輯）
-
vue中的組件分為全局注冊組件和局部注冊組件
- 組件是特殊的實例
- 組件選項和實例選項基本保持一致
- 組件沒有el選項，有template選項
template可以是一段html代碼，也可以直接指向頁面模板，類似于el選項
-
組件的data選項必須是一個函數(shù)，返回一個對象
-
組件渲染時，數(shù)據(jù)會有作用域，如果自身沒有定義，則不會渲染(數(shù)據(jù)也可以由上級傳遞 - 組件之間的傳值)
二、全局注冊組件
使用vue提供的template標簽，創(chuàng)建模板，然后再注冊到組件
1.定義全局組件
2.注冊全局組件
3.使用全局組件
三、局部注冊組件
vue實例內(nèi)部選項
四、組件之間的關(guān)系
1. 父子組件
組件的嵌套
1.創(chuàng)建父組件模板
2.創(chuàng)建子組件模板
3.定義子組件（在script）里面
4.定義父組件（在script）里面
5.注冊局部組件(父組件)，誰注冊誰使用！（在new Vue實例里面）
6.注冊局部組件(子組件)，誰注冊誰使用！（在需要使用子組件的父組件里）
7.使用父組件 （在body的vue容器里）
8.使用子組件 （在需要使用子組件的父組件的模板里）
使用組件時都是以名字命名的標簽形式
例子：
<body><div id="app">{{msg}}<!-- 7.使用父組件 --><my-com></my-com></div> </body> <script src="libs/vue.js"></script> <!-- 1.創(chuàng)建父組件模板 --> <template id="temp"><div><h1>{{msg}}</h1><!-- 8.使用子組件 --><child-com></child-com></div> </template> <!-- 2.創(chuàng)建子組件模板 --> <template id="child"><div><h2>{{msg}}</h2></div> </template><script>// 3.定義子組件const child = {template: "#child",data() {return {msg: "hello child-temp"}}}// 4.定義父組件const com = {template: "#temp",data() {return {msg: "helle temp 3"}},components: {// 6.注冊局部組件(子組件)，誰注冊誰使用！"child-com": child}}const vm = new Vue({el: "#app",data: {msg: "hello vue"},components: {// 5.注冊局部組件(父組件)，誰注冊誰使用！"my-com": com,}}) </script>其中父子組件之間的傳值是非常重要的知識部分
父子組件如何傳值將在下一篇中詳細講解
總結(jié)
- 上一篇： CSDN日报20170224——《程序员
- 下一篇： 微软的面试题及答案－超变态但是很经典