vue全域性/區域性註冊,以及一些混淆的元件
main.js入口檔案的一些常用配置, 在入口檔案上定義的public.vue為全域性元件,在這裡用的是pug模版 .wraper 的形式相當於
—main.js檔案
**main.js入口檔案的內容**
import vue from 'vue'
import router from './router'
// 引入公用元件的vue檔案 他暴漏的是乙個物件
import cpublic from './components/public'
vue.config.productiontip = false
// 註冊全域性元件-要在vue的根事咧之前
// 引數 1是標籤名字-string 2是物件 引入外部vue檔案就相當與乙個物件
vue.component('public', cpublic)
// 正常註冊全域性元件的時候,第二個引數應該是物件。
vue.component('public1', )
/* eslint-disable no-new */
// 生成vue 的根例項;建立每個元件都會生成乙個vue的事咧
new vue()
—public.vue元件為定義的全域性元件在任何元件裡都可以直接使用,不需要在vue例項選項components上在次定義,也不需要再次匯入檔案路徑。
**public.vue的元件內容**
slot(text="我是全域性元件") }
在parent.vue元件裡,用到了public全域性元件以及其他的子元件
parent.vue元件
.wrap
.input-hd
.title 名稱:
input.input(type="text",v-model="msg",placeholder="請輸入正確的值",style="outline:none;")
.content-detail
.content-name 我是父元件的內容
children(:msg='msg', number='1')
public
router-link(to='/parent/children2') 第二個子元件
router-view
children.vue是parent.vue的子元件,但是只在parent.vue作用域裡可用
slot(text="我是子元件的text") 我是子元件的內容
.name } }
結語 詳解vue元件(一)全域性元件與區域性元件
全域性元件的形式如下 childrenone 我是元件a p div template vue.component children a template 也可以直接寫乙個template的id template childrenone 其中vue.component 的第乙個引數為元件名,以後可以...
vue全域性元件與區域性元件
vue對元件的定義 元件是可復用的 vue 例項 元件之間是互不影響的,乙個元件的崩潰,並不會影響整個專案的執行。全域性元件 button add button add div src vue.js script 註冊全域性物件,要寫在vue例項的上面 vue.component button ad...
Vue元件之全域性元件與區域性元件
元件 component 是 vue.js 最強大的功能之一。元件可以擴充套件 html 元素,封裝可重用的 在較高層面上,元件是自定義元素,vue.js 的編譯器為它新增特殊功能。在有些情況下,元件也可以是原生 html 元素的形式,以 is 特性擴充套件。個人認為就是乙個可以重複利用的結構層 片...