国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

深刻理解Vue中的組件

mdluo / 3194人閱讀

摘要:還可以在某個實例中注冊只有自己能使用的組件。當在一個組件中,使用了其他自定義組件時,就會利用子組件的屬性和事件來和父組件進行數據交流。正確的做法是,在父組件中綁定屬性值時,加上修飾符。

2019-06-20更新:

Vue2.6已經更新了關于內容插槽和作用域插槽的API和用法,為了不誤導大家,我把插槽的內容刪除了。詳情請看官網

2018-07-19更新:

更新作用域插槽的屬性: scope -> slot-scope;

添加了對象解構。

今天看了下Vue官網上關于組件的教程,感覺內容還挺多,現在把組件中基本的知識梳理一下。

組件的基本使用 注冊組件

注冊組件就是利用Vue.component()方法,先傳入一個自定義組件的名字,然后傳入這個組件的配置。

 Vue.component("mycomponent",{
    template: `
這是一個自定義組件
`, data () { return { message: "hello world" } } })

如上方式,就已經創建了一個自定義組件,然后就可以在Vue實例掛在的DOM元素中使用它。

 

直接使用Vue.component()創建的組件,所有的Vue實例都可以使用。還可以在某個Vue實例中注冊只有自己能使用的組件。

var app = new Vue({
    el: "#app",
    data: {
    },
    components: {
      "my-component": {
        template: `
這是一個局部的自定義組件,只能在當前Vue實例中使用
`, } } })
模板的要求

注意:組件的模板只能有一個根元素。下面的情況是不允許的。

template: `
這是一個局部的自定義組件,只能在當前Vue實例中使用
`,
組件中的data必須是函數

可以看出,注冊組件時傳入的配置和創建Vue實例差不多,但也有不同,其中一個就是data屬性必須是一個函數。
這是因為如果像Vue實例那樣,傳入一個對象,由于JS中對象類型的變量實際上保存的是對象的引用,所以當存在多個這樣的組件時,會共享數據,導致一個組件中數據的改變會引起其他組件數據的改變。

而使用一個返回對象的函數,每次使用組件都會創建一個新的對象,這樣就不會出現共享數據的問題來了。

關于DOM模板的解析

當使用 DOM 作為模版時 (例如,將 el 選項掛載到一個已存在的元素上), 你會受到 HTML 的一些限制,因為 Vue 只有在瀏覽器解析和標準化 HTML 后才能獲取模板內容。尤其像這些元素

      ...

      自定義組件 被認為是無效的內容,因此在渲染的時候會導致錯誤。這時應使用特殊的 is 屬性:

      也就是說,標準HTML中,一些元素中只能放置特定的子元素,另一些元素只能存在于特定的父元素中。比如table中不能放置divtr的父元素不能div等。所以,當使用自定義標簽時,標簽名還是那些標簽的名字,但是可以在標簽的is屬性中填寫自定義組件的名字。

      應當注意,如果您使用來自以下來源之一的字符串模板,這些限制將不適用:

      當父組件傳遞值為基本類型時,在子組件中更改這個屬性會報錯。正確的做法是,在父組件中綁定屬性值時,加上.sync修飾符。

      然后在子組件中改變相應的屬性

          methods: {
           changeArray () {
             this.counter++
             this.$emit("update:childArray", this.counter)
           }
         }

      子組件希望對傳入的prop進行操作

      一般來說,是不建議在子組件中對父組件中傳遞來的屬性進行操作的。如果真的有這種需求,可以這樣:

      父組件傳遞了一個基本類型值,那么可以在子組件中創建一個新的屬性,并以傳遞進來的值進行初始化,之后就可以操作這個新的屬性了

      props: ["initialCounter"],
      data: function () {
        return { counter: this.initialCounter }
      }

      父組件傳遞了一個引用類型值,為了避免更改父組件中相應的數據,最好是對引用類型進行復制。復雜的情況,肯定應該是深復制。

      給子組件傳遞正確類型的值

      同樣是上面的原因,靜態的給子組件的特性傳遞值,它都會把他當做一個字符串。

      
      

      子組件中,特性的值是字符串 "1" 而不是 number 1。如果想傳遞正確的數值,應該使用v-bind傳遞,這樣就能把傳遞的值當做一個表達式來處理,而不是字符串。

      
      
      Prop驗證

      我們可以給組件的props屬性添加驗證,當傳入的數據不符合要求時,Vue會發出警告。

      Vue.component("example", {
        props: {
          // 基礎類型檢測 (`null` 意思是任何類型都可以)
          propA: Number,
          // 多種類型
          propB: [String, Number],
          // 必傳且是字符串
          propC: {
            type: String,
            required: true
          },
          // 數字,有默認值
          propD: {
            type: Number,
            default: 100
          },
          // 數組/對象的默認值應當由一個工廠函數返回
          propE: {
            type: Object,
            default: function () {
              return { message: "hello" }
            }
          },
          // 自定義驗證函數
          propF: {
            validator: function (value) {
              return value > 10
            }
          }
        }
      })

      type 可以是下面原生構造器:

      String

      Number

      Boolean

      Function

      Object

      Array

      Symbol

      type 也可以是一個自定義構造器函數,使用 instanceof 檢測。

       // 自定義Person構造器
       function Person(name, age) {
          this.name = name
          this.age = age
        }
        Vue.component("my-component", {
          template: `
      名字: {{ person-prop.name }}, 年齡: {{ person-prop.age }}
      `, props: { person-prop: { type: Person // 指定類型 } } }) new Vue({ el: "#app2", data: { person: 2 // 傳入Number類型會報錯 } })
      非Prop類型的屬性

      也可以像在html標簽中添加data-開頭的自定義屬性一樣,給自定義組件添加任意的屬性。而不僅限于data-*形式,這樣做的話,Vue會把這個屬性放在自定義組件的根元素上。一個自定義組件的模板只能有一個根元素

      覆蓋非Prop屬性

      如果父組件向子組件的非prop屬性傳遞了值,那么這個值會覆蓋子組件模板中的特性。

      上面渲染的結果是,divatt屬性是helloParent
      注意:前面已經提到過,覆蓋原則對于classstyle不適用,而是采用了合并(merge)的原則。

      上面的渲染結果是,div的類名是class1 class2,行內樣式是color:red; background:yellow;

      自定義事件

      通過prop屬性,父組件可以向子組件傳遞數據,而子組件的自定義事件就是用來將內部的數據報告給父組件的。

      如上所示,共分為以下步驟:

      子組件在自己的方法中將自定義事件以及需要發出的數據通過以下代碼發送出去

       this.$emit("myclick", "這是我暴露出去的數據", "這是我暴露出去的數據2")

      第一個參數是自定義事件的名字

      后面的參數是依次想要發送出去的數據

      父組件利用v-on為事件綁定處理器

      這樣,在Vue實例的methods方法中就可以調用傳進來的參數了

      注意: 在使用v-on綁定事件處理方法時,不應該傳進任何參數,而是直接寫v-on:myclick="onClick",不然,子組件暴露出來的數據就無法獲取到了

      綁定原生事件

      如果想在某個組件的根元素上監聽一個原生事件。可以使用 .native 修飾 v-on

      探究v-model

      v-model可以對表單控件實現數據的雙向綁定,它的原理就是利用了綁定屬性和事件來實現的。比如input控件。不使用v-model,可以這樣實現數據的雙向綁定:

      {{text}}

      上面的代碼同樣實現了數據的雙向綁定。其本質就是:

      inputvalue特性綁定到Vue實例的屬性text上,text改變,input中的內容也會改變

      然后把表單的input事件處理函數設置為Vue實例的一個方法,這個方法會根據輸入參數改變Vue中text`的值

      相應的,在input中輸入內容時,觸發了input事件,把event.target.value傳給這個方法,最后就實現了改變綁定的數據的效果。

      v-model就是上面這種方式的語法糖,也就是把上面的寫法封裝了一下,方便我們使用。

      使用自定義事件創建自定義的表單輸入組件

      理解了v-model的內幕,也就可以把這個效果用在自定義表單組件上了。
      來實現一個簡單的只能輸入hello的表單輸入組件。

      {{hello}}
      定制組件的v-model

      默認情況下,一個組件的 v-model 會使用 value 屬性和 input 事件,但是諸如單選框、復選框之類的輸入類型可能把 value 屬性用作了別的目的。model 選項可以回避這樣的沖突:

      Vue.component("my-checkbox", {
        model: {
          prop: "checked",   // 將輸入的特性改為checked
          event: "change"        // 觸發的自定義事件類型為change
        },
        props: {
          checked: Boolean,
          // this allows using the `value` prop for a different purpose
          value: String
        }
      })

      這樣設置的話,

      上面的代碼就等同于

      實際使用時,與之前不同的地方是:

      把子組件中接收外部數據的prop屬性改為checked

      向父組件發出事件時,事件類型應改為change

      Vue.component("my-component3", {
          template: ``,
          props: ["checked"],        // 屬性名改變
          model: {
            prop: "checked",
            event: "change"
          },
          methods: {
            checkInput (value) {
              var hello = "hello"
              if (!hello.includes(value)) {
                this.$emit("change", hello)   // 事件類型改變
                this.$refs.input.value = hello
              } else {
                this.$emit("change", value)  // 事件類型改變
              }
            }
          }
        })
      動態組件

      通過使用保留的 元素,動態地綁定到它的 is 特性,可以讓多個組件使用同一個掛載點,并動態切換:

       

      也可以直接綁定到組件對象上:

      var Home = {
        template: `
      這是home組件
      ` } new Vue({ el: "#app6", data: { currentComponent: Home } })
      保留切換出去的組件,避免重新渲染

      如果把切換出去的組件保留在內存中,可以保留它的狀態或避免重新渲染。為此可以添加一個 keep-alive 指令參數:

      
        
          
        
      

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

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

相關文章

  • Vue.js學習系列二 —— vuex學習實踐筆記(附DEMO)

    摘要:有興趣的同學可以查看之前發布的文章學習系列一學習實踐筆記附學習系列二學習實踐筆記附學習系列三和網絡傳輸相關知識的學習實踐學習系列四打包工具的使用學習系列五從來聊聊學習系列項目地址項目暫時有點亂,之后會進行整理優化。 上次學習了vue-router的使用,讓我能夠在各個頁面間切換,將頁面搭建了起來。這次則要學習vue的狀態管理模式——vuex。它類似于redux來應用的全局狀態。 注:本...

    DobbyKim 評論0 收藏0
  • Vue原理】VModel - 白話版

    摘要:執行的時候,會綁定上下文對象為組件實例于是中的就能取到組件實例本身,的代碼塊頂層作用域就綁定為了組件實例于是內部變量的訪問,就會首先訪問到組件實例上。其中的獲取,就會先從組件實例上獲取,相當于。 寫文章不容易,點個贊唄兄弟專注 Vue 源碼分享,文章分為白話版和 源碼版,白話版助于理解工作原理,源碼版助于了解內部詳情,讓我們一起學習吧研究基于 Vue版本 【2.5.17】 如果你覺得...

    keke 評論0 收藏0
  • react.js,angular.js,vue.js學習哪個好?

    摘要:好好打基礎,然后多嘗試不同風格的框架,因為只有嘗試過后才能理解比如徐飛提到的各種權衡,也只有嘗試過后才能知道哪個能真正提升自己的開發效率。 今天看了幾篇關于這三個主流框架的PK,如標題:react.js,angular.js,vue.js學習哪個好?相信每個人都有這種問題。 現在的前端框架層出不窮,作為前端開發者何去何從?fackbook的react.js盛世火熱,react nati...

    Towers 評論0 收藏0
  • 反思總結然后整裝待發

    摘要:保證上線后的版本不會因瀏覽器緩存而產生影響。前端部分之后會有多人合作,為了提高效率決定采用組件化開發。對之后的維護工作造成了一點困擾。之后的日子里做到一周更新兩篇博文,主要是實際項目中遇到的具體問題來加以總結和分析,未完待續。 原文鏈接: http://xdlrt.github.io/2016/1...距離上次更博已經過去兩個月了,終于也有時間能靜下心來想一些事情,也對這幾個月的生活做...

    twohappy 評論0 收藏0

發表評論

0條評論

mdluo

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<