component（組件）

---

vue是單頁面web程序，這意味著需要大量模塊化界面參與其中，這就是組件。

組件是一個實現單一功能的vue界面，也可以是一個以功能劃分而成的復雜vue界面。

?

注冊組件：

?Vue.component('my-component-name', { /* ... */ })?

范例：

<div id="app"><runoob></runoob> </div> <script> // 注冊 Vue.component('runoob', {template: '<h1>自定義組件!</h1>' }) new Vue({el: '#app' }) </script>

以上這些組件是全局注冊的。也就是說它在注冊之后可以用在任何新創建的 Vue 根實例 (new Vue) 的模板中。全局注冊所有的組件意味著即便你已經不再使用一個組件了，它仍然會被包含在你最終的構建結果中。這造成了用戶下載的 JavaScript 的無謂的增加。

?

局部注冊組件：

<div id="app"><runoob></runoob> </div> <script> var Child = {template: '<h1>自定義組件!</h1>' } new Vue({el: '#app',components: {'runoob': Child// <runoob> 將只在父模板可用} }) </script>

模塊中注冊組件：

<template><BaseInputv-model="searchText"@keydown.enter="search"/><BaseButton @click="search"><BaseIcon name="search"/></BaseButton></template><script>import BaseButton from './BaseButton.vue'import BaseIcon from './BaseIcon.vue'import BaseInput from './BaseInput.vue'export default {components: {BaseButton,BaseIcon,BaseInput}}</script>

?

export和export default

---

export 和export default 都用來導出模塊，Vue 的單文件組件通常需要導出一個對象，這個對象是 Vue 實例的選項對象，以便于在其它地方可以使用 import 引入。

而 new Vue() 相當于一個構造函數，在入口文件 main.js 構造根組件的同時，如果根組件還包含其它子組件，那么 Vue 會通過引入的選項對象構造其對應的 Vue 實例，最終形成一棵組件樹。

?

export 可以導出多個命名模塊，例如：

//demo1.jsexport const str = 'hello world'export function f(a){return a+1}

對應的引入方式：

//demo2.jsimport { str, f } from 'demo1'

?

export default 只能導出一個默認模塊，這個模塊可以匿名，例如：

//demo1.jsexport default {a: 'hello',b: 'world' }

對應的引入方式（模塊可以起別名）：

//demo2.js import obj from 'demo1'

?

父子組件相互調用函數

---

父調子：

在vue中聲明子組件并設置ref屬性，PageContractDetail是子組件：

?<PageContractDetail ref="contractDetail"></PageContractDetail>?

在代碼中使用this.$refs.子組件ref值.子組件函數() 方式調用：

? this.$refs.contractDetail.initData(row.id);?

?

子調父：

直接使用this.$parent.父函數() 調用即可：

?this.$parent.hideDetail();?

?

總結

以上是生活随笔為你收集整理的Vue入门教程 第五篇 （组件）的全部內容，希望文章能夠幫你解決所遇到的問題。

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