vue入門筆記體系（六）vue組件

Neilyo 發(fā)布于2019-08-29 16:23 / 657人閱讀

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

組件注冊

關(guān)于組件名：

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

全局注冊

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

局部注冊

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

    }

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

}).$mount("#root")

模板的要求

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

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

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

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

data: {
  count: 0
}

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

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

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

解析 DOM 模板時的注意事項

有些 HTML 元素，諸如

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

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

字符串 (例如：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)容
      
    
  `
})

具名插槽

有些時候我們需要多個插槽，可以進(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)容來做到這一點(diǎn)。

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

作用域插槽

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}} //此時沒有作用域，訪問到的不是組件內(nèi)的value,而是外部的value
        //添加作用域，組件內(nèi)部傳遞的數(shù)據(jù)都保存在props對象中
        {{props.value}}
      
    
  `
})

動態(tài)組件




    
    
    
    Document

provide / inject 跨級組件通信

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

import Vue from "vue"

const ChildComponent = {
  template: "child component:",
  inject: ["yeye","value"], 
  mounted () {
    console.log(this.$parent.$options.name) //上一級
    console.log(this.yeye,this.value) //上上一級,接受到的數(shù)據(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)的值,是一個對象或返回一個對象的函數(shù)。該對象包含可注入其子孫的屬性。
    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) //上一級
    console.log(this.yeye,this.value) //上一級
  }
}

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 主要為高階插件/組件庫提供用例。并不推薦直接用于應(yīng)用程序代碼中。

渲染函數(shù) & JSX

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

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

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

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

發(fā)表評論

登陸后可評論

0條評論

Neilyo

男|高級講師

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

TA的文章

【歷史上的今天】10 月 12 日：C 語言之父逝世；西門子誕生；喬布斯推出 NeXT 電腦

閱讀 3577·2021-10-13 09:39
兒童故事書應(yīng)用軟件FarFaria暴露3M用戶數(shù)據(jù) 涉及290萬用戶信息

閱讀 1528·2021-10-08 10:05
騰訊開源百萬級服務(wù)發(fā)現(xiàn)和治理中心北極星

閱讀 2353·2021-09-26 09:56
網(wǎng)絡(luò)喚醒的配置好麻煩？沒關(guān)系這里有其他簡單的遠(yuǎn)程開機(jī)方法！

閱讀 2371·2021-09-03 10:28
玩轉(zhuǎn)CSS 3D -正八面體與正十二面體

閱讀 2760·2019-08-29 18:37
淺析git

閱讀 2089·2019-08-29 17:07
vue入門筆記體系（六）vue組件

閱讀 658·2019-08-29 16:23
video.js 源碼分析（JavaScript）

閱讀 2264·2019-08-29 11:24

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

資訊專欄INFORMATION COLUMN

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

vue入門筆記體系（六）vue組件

相關(guān)文章