vue元件是什麼

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

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

元件是什麼？

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

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

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

Vue元件的使用

先說我們的目錄

一.建立我們的元件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是單向綁定的，也就是只能父元件向子元件傳遞，不能反向。
用法如下：

B元件

父元件

##那麼你將會看到頁面顯示

在created列印下value的值

結果，     

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

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

父元件：

在DOM中引入@msg='msg'

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

透過方法接收

運行，點選回覆父元件     

列印結果：

更多程式相關知識，請造訪：程式設計學習！ ！

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