在main.js中配置,配置完成之後可以全域性使用
// 1、引入元件物件
import globaltitle from './components/globaltitle.vue'
// 2、宣告全域性元件 vue.component('元件名',元件物件);
vue.component('globaltitle',globaltitle);
// 3、在其他地方的布局中通過元件名進行使用
在子布局中使用
// 1、建立對應的子元件vue物件
foot
// 2、在要引入的vue中的script中引入子元件物件
import headvue from './headvue.vue'
import bodyvue from './bodyvue.vue'
import footvue from './footvue.vue'
// 3、在要引入的vue中的components中申明
components:,
// 4、在要引入的vue中的template中進行使用
在style標籤上新增scoped屬性,以表示它的樣式作用於當下的模組。在與全域性的樣式衝突的時候使用本地樣式。
// 1、在父元件中呼叫的位置新增要傳入的屬性
// 2、在子元件中宣告對應的屬性
export default
}, props:,
}// 3、在對應的位置進行使用
}
// 1、建立vue物件
import vue from 'vue'
var connector = new vue();
export default connector;
// 2、在父元件中匯入vue物件並註冊監聽
import connect from '../tools/connector.js'
methods: )
}},// 3、在子元件中匯入vue物件並設定傳遞內容
import connect from '../tools/connector.js'
methods:,
}
注意:
取消註冊:
connect.$off('事件名');
Vue入門(2)元件
元件是可復用的 vue 例項,且帶有乙個名字。元件是vue.js最強大的功能之一。元件可以擴充套件html元素,封裝可重用的 在較高層面上,元件是自定義的元素,vue.js的編譯器為它新增特殊功能。在有些情況下,元件也可以是原生html元素的形式,以is特性擴充套件。1.區域性元件的建立 div 區...
vue 元件 2 元件引數傳遞》
1 效果 展示出來的資料都是父元件傳給子元件的資料 01 父元件向子元件傳遞資料.html 1 效果 02 父傳子 props中的駝峰標識 html 1 效果 點選後將父元件的引數,傳遞給子元件並展示 03 子傳父 自定義事件 html 父元件展示子元件傳來的引數 1 效果 2 04 子元件改父元件...
Vue學習手冊(四) 元件化開發
三 父子元件通訊 3.3 子傳父事件 四 父子元件直接呼叫 五 插槽類子元件 script中呼叫 以下為父子元件的格式 單向傳值 即子元件中改變值的話,不會影響到父元件值,父元件值變動,會實時改變子元件資料 事件傳送 通常子元件向父元件傳送的是事件,父元件需要知道子元件發生了什麼事件,並做相應的反應...