首頁 > web前端 > Vue.js > 主體

vue元件是什麼

青灯夜游
發布: 2021-10-26 11:51:03
原創
14938 人瀏覽過

在vue中,元件是可重複使用的Vue實例,它擁有獨一無二的元件名稱,它可以擴充HTML元素,以元件名稱的方式作為自訂的HTML標籤。組件可大幅提高了程式碼的複用率。

vue元件是什麼

本教學操作環境:windows7系統、vue2.9.6版,DELL G3電腦。

元件是什麼?

元件是Vue中的重要概念,是一個可以重複使用的Vue實例,它擁有獨一無二的元件名稱,它可以擴充HTML元素,以元件名稱的方式作為自訂的HTML標籤。因為元件是可重複使用的Vue實例,所以它們與new Vue()接收相同的選項,例如data,computed、watch、methods以及生命週期鉤子等。僅有的例外是像el這樣根實例特有的選項。

把一些公共的模組抽出出來,然後寫成單獨的工具元件或頁面,在需要的頁面中就直接引入即可。那麼我們可以將其抽出為一個組件進行複用。

例如 頁面頭部、側邊、內容區,尾部,上傳圖片,等多個頁面要用到一樣的就可以做成組件,提高了程式碼的複用率。

Vue元件的使用

先說我們的目錄

一.建立我們的元件B.vue

vue元件是什麼

同理,#新建一個hello_word.vue作為父

vue元件是什麼

#那麼你將看到這樣的結果

vue元件是什麼

# #重點:

hello_word.vue中引入B.vue模組   // import showB from './B.vue'  #引入元件

vue元件是什麼

#B檔案的自訂模組名稱showB

註冊元件

 components:{
          showB,        
        },
<showB /> //使用组件
登入後複製

注意:定義元件名稱要駝峰命名法  如:使用PascalCase  使用kebab-case

#開始進入正題props

父元件傳值給子元件(父元件綁定資料如:value="該工作了",子元件透過props取得) 子元件的props選項能夠接收來自父元件資料。沒錯,僅僅只能接收,props是單向綁定的,也就是只能父元件向子元件傳遞,不能反向。
用法如下:

B元件

父元件

vue元件是什麼##那麼你將會看到頁面顯示

vue元件是什麼在created列印下value的值

vue元件是什麼結果,     

#子元件傳值給父元件子元件中:

<p @click="chuanzhi">回复父组件</p>
chuanzhi() {
            this.$emit(&#39;msg&#39;, &#39;知道了知道了&#39;) //执行 msg 函数并把要改变的值作为参数带过去
        }
登入後複製

vue元件是什麼父元件:

在DOM中引入@msg='msg'

<showB :value=&#39;text&#39; @msg=&#39;msg&#39;/> 
 msg(val){
                 console.log(val,&#39;val&#39;)
                 }
登入後複製

透過方法接收

vue元件是什麼運行,點選回覆父元件     

vue元件是什麼列印結果:

更多程式相關知識,請造訪:程式設計學習! !

以上是vue元件是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!