在vue中,元件是可重複使用的Vue實例,它擁有獨一無二的元件名稱,它可以擴充HTML元素,以元件名稱的方式作為自訂的HTML標籤。組件可大幅提高了程式碼的複用率。
本教學操作環境:windows7系統、vue2.9.6版,DELL G3電腦。
元件是Vue中的重要概念,是一個可以重複使用的Vue實例,它擁有獨一無二的元件名稱,它可以擴充HTML元素,以元件名稱的方式作為自訂的HTML標籤。因為元件是可重複使用的Vue實例,所以它們與new Vue()接收相同的選項,例如data,computed、watch、methods以及生命週期鉤子等。僅有的例外是像el這樣根實例特有的選項。
把一些公共的模組抽出出來,然後寫成單獨的工具元件或頁面,在需要的頁面中就直接引入即可。那麼我們可以將其抽出為一個組件進行複用。
例如 頁面頭部、側邊、內容區,尾部,上傳圖片,等多個頁面要用到一樣的就可以做成組件,提高了程式碼的複用率。
先說我們的目錄
一.建立我們的元件B.vue
同理,#新建一個hello_word.vue作為父
#那麼你將看到這樣的結果
# #重點:在hello_word.vue中引入B.vue模組 // import showB from './B.vue' #引入元件
#B檔案的自訂模組名稱showB註冊元件
components:{ showB, }, <showB /> //使用组件
注意:定義元件名稱要駝峰命名法 如:使用PascalCase 使用kebab-case
#開始進入正題props
父元件傳值給子元件(父元件綁定資料如:value="該工作了",子元件透過props取得) 子元件的props選項能夠接收來自父元件資料。沒錯,僅僅只能接收,props是單向綁定的,也就是只能父元件向子元件傳遞,不能反向。
用法如下:
##那麼你將會看到頁面顯示
在created列印下value的值
結果,
#子元件傳值給父元件子元件中:
<p @click="chuanzhi">回复父组件</p> chuanzhi() { this.$emit('msg', '知道了知道了') //执行 msg 函数并把要改变的值作为参数带过去 }
父元件:
在DOM中引入@msg='msg'
<showB :value='text' @msg='msg'/> msg(val){ console.log(val,'val') }
透過方法接收
運行,點選回覆父元件
列印結果:
更多程式相關知識,請造訪:程式設計學習! !
以上是vue元件是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!