手把手教你學Vue-2(組件開發)

lansheng228 發布于2019-08-30 14:17 / 2607人閱讀

摘要：組件聲明組件分為全局的和局部的。父組件通過給子組件下發數據，子組件通過事件給父組件發送消息。以下實例中子組件已經和它外部完全解耦了。

1.vue 組件-聲明

組件分為全局的和局部的。

全局聲明

Vue.component(tagName, options) **

引用組件

我們也可以在實例選項中注冊局部組件，這樣組件只能在這個實例中使用：

查看線上演示效果
-- todo
這里后期根據應用談一下兩者的好處和實際應用

組件的data 必須是一個函數

Vue.component("simple-counter", {
  template: "",
  // 技術上 data 的確是一個函數了，因此 Vue 不會警告，
  // 但是我們卻給每個組件實例返回了同一個對象的引用
  data: function () {
    return{
    counter:0
    }
  }
})

new Vue({
  el: "#example-2"
})

2. 父子組件的傳值-props


    
      
    

// 注冊
Vue.component("child", {
  // 聲明 props
  props: ["message"],
  // 同樣也可以在 vm 實例中像 "this.message" 這樣使用
  template: "{{ message }}"
})
// 創建根實例
new Vue({
  el: "#app",
  data:{
    message:"hello",
  }
})

3. 父子組件的值相互傳遞

在 Vue 中，父子組件的關系可以總結為 prop 向下傳遞，事件向上傳遞。父組件通過 prop 給子組件下發數據，子組件通過事件給父組件發送消息。

父組件是使用 props 傳遞數據給子組件，但如果子組件要把數據傳遞回去，就需要使用自定義事件！
我們可以使用 v-on 綁定自定義事件, 每個 Vue 實例都實現了事件接口(Events interface)，即：
使用 $on(eventName) 監聽事件
使用 $emit(eventName) 觸發事件
另外，父組件可以在使用子組件的地方直接用 v-on 來監聽子組件觸發的事件。

以下實例中子組件已經和它外部完全解耦了。它所做的只是觸發一個父組件關心的內部事件。


    
      {{ total }}

GPU云服務器云服務器手把手教你做圖像識別手把手教你阿里云服務器搭建商城一個教你開發小程序的小程序組件開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115914.html

手把手教你學Vue-2(組件開發)

摘要：組件聲明組件分為全局的和局部的。父組件通過給子組件下發數據，子組件通過事件給父組件發送消息。以下實例中子組件已經和它外部完全解耦了。 1.vue 組件-聲明組件分為全局的和局部的。全局聲明 Vue.component(tagName, options) ** 引用組件 // 注冊 Vue.comp...

Null 2019-08-22 15:49 評論0 收藏0
手把手教你學Dapr

摘要：配置配置使用概率抽樣。采樣率定義了對跟蹤跨度進行采樣的概率，其值可以介于和含之間。例如，以下配置對象將采樣率更改為即每個跨度都被采樣，并使用協議將跟蹤發送到位于的服務器文件路徑注將采樣率更改為會完全禁用跟蹤。目錄手把手教你學Dapr - 1. .Net開發者的大時代手把手教你學Dapr - 2. 必須知道的概念手把手教你學Dapr - 3. 使用Dapr運行第一個.Net程序手把手教你學Da...

qqlcbb 2021-11-18 10:07 評論0 收藏0
手把手教你學vue-4（vuex）

摘要：管理統一組件狀態。映射到組件將映射為也支持載荷將映射為將映射為概念允許我們將分割成模塊。每個模塊擁有自己的類似里面的針對每個組件對應的狀態做處理的狀態的狀態對于模塊內部的，局部狀態通過暴露出來，根節點狀態則為。 1.首先明白vuex是做什么用的。管理統一組件狀態state。每個應用將僅僅包含一個 store 實例。單一狀態樹讓我們能夠直接地定位任一特定的狀態片段，在調試的過程中也能輕...

Hujiawei 2019-08-22 15:59 評論0 收藏0