vue組件component的注冊與使用詳解
1.什么是Vue組件
(1)定義
組件是Vue是一個可以重復(fù)使用的Vue實例, 它擁有獨一無二的組件名稱,它可以擴展HTML元素,以組件名稱的方式作為自定義的HTML標簽。
因為組件是可復(fù)用的Vue實例, 所以它們與new Vue() 接收相同的選項
例如 data, computed、watch、methods以及生命周期鉤子等。僅有的例外是像el這樣根實例特有的選項。 把一些公共的模塊抽取出來,然后寫成單獨的的工具組件或者頁面,在需要的頁面中就直接引入即可。
(2)父子關(guān)系
組件在封裝好之后不存在父子關(guān)系,彼此相互獨立,在嵌套使用時才存在父子關(guān)系。
2.Vue組件使用(注冊方式)
1.局部注冊(私有組件注冊)
通過 component 節(jié)點注冊的是私有子組件
在父組件文件中:
(1)引入組件語法如下:
import '組件對象' from 'URL'
(2)導(dǎo)出組件 語法如下:
export default { }
(3)代碼演示:
import hello from './components/hello.vue' // export default {} 是固定寫法 為了導(dǎo)出App組件 export default { //此處定義了私有組件! components: { hello },
2.全局注冊
(1)在main.js文件中,引入 import '組件對象' from '文件路徑'
(2)組件注冊:Vue.component ('組件名','組件對象')
import Vue from 'vue' import App from './App.vue' //導(dǎo)入全局組件 world.vue import world from '@/components/world.vue' //注冊 world.vue 組件 Vue.component('world', { //可直接縮寫為 world 'world': world }) //-------以下為此全局組件(world.vue)的代碼--------- <template> <div id="world"> world vue.js </div> </template> <script> export default { name: 'world' } </script>
(3)最終效果
3.使用組件的步驟:
(1)在App.vue(即父組件) 中 script 標簽中 使用 import 語法導(dǎo)入需要的組件
代碼示例:
import hello from '@/component/hello.vue'
(2)接著使用 component 節(jié)點注冊組件
代碼示例:
export default { data{}, component: { // 'hello':hello簡寫為hello hello } }
(3)以標簽形式使用注冊好的組件
代碼示例:
<template> <div id='box'> <hello></hello> </div> </template>
感謝閱讀!
以下為App.vue、main.js 和 html 的完整代碼:
<template> <div id="app"> <button id="post" v-on:click="post">{{message1}}</button> <button id="get" @click="get">{{message2}}</button> <hello></hello> <world></world> </div> </template> <script> //此處導(dǎo)入局部組件 import hello from './components/hello.vue' import World from './components/world.vue' // export default {} 是固定寫法 為了導(dǎo)出App組件 export default { //此處定義了私有組件! components: { hello, World }, // 導(dǎo)出的App組件名使用 name:'xxx' 定義 name: 'App', // 在Vue組件中,data不能和以前一樣一以對象的形式, // 而應(yīng)該使用函數(shù)的形式,在 return 中可以定義數(shù)據(jù) // 屬性之間用逗號隔開 data () { return { message1 : '發(fā)送post請求', message2 : '發(fā)送get請求' } }, methods: { post() { console.log('發(fā)送了post請求') }, get() { console.log('發(fā)送了get請求') } } } </script> <style lang="less"> button { display: block; margin-top: 10px; } </style>
import Vue from 'vue' import App from './App.vue' //導(dǎo)入全局組件 world.vue import world from '@/components/world.vue' //注冊 world.vue 組件 Vue.component('world', { //可直接縮寫為 world 'world': world }) Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" > <title> <%= htmlWebpackPlugin.options.title %> </title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <world></world> </body> </html>
到此這篇關(guān)于vue組件component的注冊與使用的文章就介紹到這了,更多相關(guān)vue組件component內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue使用echarts圖表自適應(yīng)的幾種解決方案
這篇文章主要給大家介紹了關(guān)于vue使用echarts圖表自適應(yīng)的幾種解決方案,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-12-12vue2.0 computed 計算list循環(huán)后累加值的實例
下面小編就為大家分享一篇vue2.0 computed 計算list循環(huán)后累加值的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03