vue入門(mén)筆記體系（六）vue組件

niuxiaowei111 發(fā)布于2019-08-23 10:57 / 3196人閱讀

摘要：更推薦用和實(shí)現(xiàn)父子組件通信創(chuàng)建實(shí)例此時(shí)打印出組件繼承使用基礎(chǔ)構(gòu)造器，創(chuàng)建一個(gè)子類。包含組件選項(xiàng)的對(duì)象創(chuàng)建構(gòu)造器創(chuàng)建實(shí)例，并掛載到一個(gè)元素上。該對(duì)象包含可注入其子孫的屬性。和綁定并不是可響應(yīng)的。

組件注冊(cè)

關(guān)于組件名：

*組件名可以是kebab-case (短橫線分隔命名)或者PascalCase (駝峰式命名)
當(dāng)使用 kebab-case (短橫線分隔命名) 定義一個(gè)組件時(shí)，你也必須在引用這個(gè)自定義元素時(shí)使用 kebab-case
當(dāng)使用 PascalCase (駝峰式命名) 定義一個(gè)組件時(shí)，你在引用這個(gè)自定義元素時(shí)兩種命名法都可以使用。*

全局注冊(cè)

//在注冊(cè)之后可以用在任何新創(chuàng)建的 Vue 根實(shí)例 (new Vue) 的模板中
Vue.component("my-component-name", {
  // ... 選項(xiàng) ...
})

局部注冊(cè)

const component = {
    template: `
    
      
    
  `,
    data() {
        return {
            text: 123
        }
    },
    methods:{

    }

}
const app = new Vue({
    //el:"#root",
    components: {
        comp: component
    },
    template: "",

}).$mount("#root")

模板的要求

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

template: `這是一個(gè)局部的自定義組件，只能在當(dāng)前Vue實(shí)例中使用
            `,

組件中的data必須是函數(shù)

當(dāng)我們定義這個(gè) 組件時(shí)，你可能會(huì)發(fā)現(xiàn)它的 data 并不是像這樣直接提供一個(gè)對(duì)象：

data: {
  count: 0
}

取而代之的是，一個(gè)組件的 data 選項(xiàng)必須是一個(gè)函數(shù)，因此每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝：

data: function () {
  return {
    count: 0
  }
}

如果 Vue 沒(méi)有這條規(guī)則，所有模板都會(huì)共享一份數(shù)據(jù)。

解析 DOM 模板時(shí)的注意事項(xiàng)

有些 HTML 元素，諸如

這個(gè)自定義組件會(huì)被作為無(wú)效的內(nèi)容提升到外部，并導(dǎo)致最終渲染結(jié)果出錯(cuò)。幸好這個(gè)特殊的 is 特性給了我們一個(gè)變通的辦法：

需要注意的是如果我們從以下來(lái)源使用模板的話，這條限制是不存在的：

字符串 (例如：template: "...")
單文件組件 (.vue)
插槽 插槽內(nèi)容

const component = {
  template: `
    
       //vue的默認(rèn)組件，放置插槽的地方
    
  `,
  data () {
    return {
      style: {
        width: "200px",
        height: "200px",
        border: "1px solid #aaa"
      },
      value: "component value"
    }
  }
}
new Vue({
  components: {
    CompOne: component
  },
  el: "#root",
  data () {
    return {
      value: "123"
    }
  },
  mounted () {

  },
  template: `
    
      
        this is contne //傳遞插槽內(nèi)容
      
    
  `
})

具名插槽

有些時(shí)候我們需要多個(gè)插槽，可以進(jìn)行命名；

import Vue from "vue"

const component = {
  template: `
    
      
         //進(jìn)行插槽命名
      
      
        
      
    
  `,
  data () {
    return {
      style: {
        width: "200px",
        height: "200px",
        border: "1px solid #aaa"
      },
      value: "component value"
    }
  }
}

new Vue({
  components: {
    CompOne: component
  },
  el: "#root",
  data () {
    return {
      value: "123"
    }
  },
  mounted () {

  },
  template: `
    
      
        this is header ///向指定的內(nèi)容
        this is body
      
    
  `
})

插槽的默認(rèn)內(nèi)容

可以在標(biāo)簽內(nèi)部指定默認(rèn)的內(nèi)容來(lái)做到這一點(diǎn)。

如果父組件為這個(gè)插槽提供了內(nèi)容，則默認(rèn)的內(nèi)容會(huì)被替換掉。

作用域插槽

import Vue from "vue"

const component = {
  template: `
    
       //向外傳遞的數(shù)據(jù)
    
  `,
  data () {
    return {
      style: {
        width: "200px",
        height: "200px",
        border: "1px solid #aaa"
      },
      value: "component value"
    }
  }
}

new Vue({
  components: {
    CompOne: component
  },
  el: "#root",
  data () {
    return {
      value: "123"
    }
  },
  mounted () {
    console.log(this.$refs.comp.value, this.$refs.span) //打印出組件實(shí)例和HTML標(biāo)簽
  },
  template: `
    
      
        {{value}} //此時(shí)沒(méi)有作用域，訪問(wèn)到的不是組件內(nèi)的value,而是外部的value
        //添加作用域，組件內(nèi)部傳遞的數(shù)據(jù)都保存在props對(duì)象中
        {{props.value}}
      
    
  `
})

動(dòng)態(tài)組件




    
    
    
    Document

provide / inject 跨級(jí)組件通信

這對(duì)選項(xiàng)需要一起使用，以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效。

import Vue from "vue"

const ChildComponent = {
  template: "child component:",
  inject: ["yeye","value"], 
  mounted () {
    console.log(this.$parent.$options.name) //上一級(jí)
    console.log(this.yeye,this.value) //上上一級(jí),接受到的數(shù)據(jù)，打印出上上一級(jí)的vue實(shí)例和123
  }
}

const component = {
  name: "comp",
  components: {
    ChildComponent
  },
  template: `
    
      
      
    
  `,
  data () {
    return {
      style: {
        width: "200px",
        height: "200px",
        border: "1px solid #aaa"
      },
      value: "component value",
      value2: "component222 value"
    }
  }
}

new Vue({
  components: {
    CompOne: component
  },
  provide () { //和data一樣，可以調(diào)用相應(yīng)的值,是一個(gè)對(duì)象或返回一個(gè)對(duì)象的函數(shù)。該對(duì)象包含可注入其子孫的屬性。
    return {
      yeye: this,
      value:this.value
    }
  },
  el: "#root",
  data () {
    return {
      value: "123"
    }
  },
  mounted () {
    console.log(this.$refs.comp.value2, this.$refs.span)
  },
  template: `
    
      
        {{props.value}}
      
    
  `
})

provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。

import Vue from "vue"

const ChildComponent = {
  template: "child component:{{data.value}}",
  inject: ["yeye","data"],
  mounted () {
    console.log(this.$parent.$options.name) //上一級(jí)
    console.log(this.yeye,this.value) //上一級(jí)
  }
}

const component = {
  name: "comp",
  components: {
    ChildComponent
  },
//   template: `
//     
//       
//         
//       
//       
//         
//       
//     
//   `,
  template: `
    
      
      
    
  `,
  data () {
    return {
      style: {
        width: "200px",
        height: "200px",
        border: "1px solid #aaa"
      },
      value: "component value",
      value2: "component222 value"
    }
  }
}

new Vue({
  components: {
    CompOne: component
  },
  provide () { //和data一樣，可以調(diào)用相應(yīng)的值
    const data = {}

    // es5雙向綁定實(shí)現(xiàn)原理
    Object.defineProperty(data, "value", {
      get: () => this.value, //獲取最新value，每次調(diào)用value相當(dāng)于get()方法
      enumerable: true //可讀取
    })

    return {
      yeye: this,
    //   value:this.value
      data
    }
  },
  el: "#root",
  data () {
    return {
      value: "123"
    }
  },
  mounted () {
    console.log(this.$refs.comp.value2, this.$refs.span)
  },
  template: `
    
      
        {{props.value}}
      
      
    
  `
})

provide 和 inject 主要為高階插件/組件庫(kù)提供用例。并不推薦直接用于應(yīng)用程序代碼中。

渲染函數(shù) & JSX

參考：渲染函數(shù)&JSX

GPU云服務(wù)器云服務(wù)器 vue組件 vue3 學(xué)習(xí)筆記 (五)——vue3 vue組件開(kāi)發(fā) vue父子組件通訊

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/96843.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

niuxiaowei111

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Go語(yǔ)言核心36講（Go語(yǔ)言實(shí)戰(zhàn)與應(yīng)用八）--學(xué)習(xí)筆記

閱讀 2242·2021-11-19 09:55
我用Python爬取了女神視界，爬蟲(chóng)之路永無(wú)止境「內(nèi)附源碼」

閱讀 2728·2021-11-11 16:55
Python表白代碼：太秀了，用過(guò)的人都找到了對(duì)象...【滿屏玫瑰盛開(kāi)！】

閱讀 3255·2021-09-28 09:36
虛擬主機(jī)能承受多少ip-虛擬主機(jī)有什么優(yōu)勢(shì)嗎？

閱讀 2037·2021-09-22 16:05
【譯】Vertical-Align: All You Need To Know

閱讀 3389·2019-08-30 15:53
上下高度固定（100px），中間自適應(yīng)

閱讀 1854·2019-08-30 15:44
css選擇器和jQuery選擇器

閱讀 2974·2019-08-29 13:10
? Emoji ? - 收藏集 - 掘金

閱讀 1410·2019-08-29 12:30

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

vue入門(mén)筆記體系（六）vue組件

相關(guān)文章