一、定義組件

const school = Vue.extend({name: 'xuexiao', // ----------------------------> 指定組件在開發者工具中顯示的名字template: ` // ----------------------------> 模板<div>... 此處是結構</div>`,data() { // ----------------------------> 模板數據return {msg: '此處是數據'}} })// Vue.extend 的簡寫方式 const school = {....}

二、注冊組件

// 全局注冊 Vue.component('變量名', 組件名); // 局部注冊 new Vue({el: '#root',components: { // ----------------------------> 注冊多個組件組件名,組件名,組件名} })

三、使用組件

<div id="root"><組件名></組件名><組件名/> <!-- 后續組件不能渲染 -><my-name/></div>

四、組件嵌套

// 1. 把子組件寫在父組件之前 // 2. 父組件內注冊組件 const 父組件 = {components: {// 子組件名稱} } // 3. 父組件模板內使用子組件 template: `<div><student/></div> `,

五、對組件的理解

組件本身是 Vue.extend 生成的 VueComponent 構造函數

每次調用 Vue.extend，返回的都是一個全新的 VueComponent 實例對象

每個 VueComponent 都被 vm 管理著

VueComponent.prototype.__proto__ === Vue.prototype // true
讓 VueComponent 可以訪問到 Vue.prototype 上的屬性、方法，如果沒有上面這一句，VueComponent 要么就自己管自己，要么就從 Object.prototype 上找東西

關于 this 指向
(1) new Vue(option) 里面的 data、computed、methods、watch 他們的 this 都是 vm
(2) 組件中的 this 是 VueComponent 實例對象

總結

以上是生活随笔為你收集整理的vue 组件 - 非单文件组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。