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

資訊專欄INFORMATION COLUMN

組件(5):雜項

didikee / 3204人閱讀

摘要:全局混入對象不會覆蓋組件中的同名鉤子函數(shù)將混合為一個數(shù)組,因此都將被調(diào)用。而鉤子函數(shù)混入和組件中的不合并,而是都執(zhí)行,先執(zhí)行混入中的鉤子,再執(zhí)行組件中的。

組件引用 —— ref、$refs

給子組件或者原始DOM加上ref特性,就可以為其聲明引用標記,添加引用后,可以在Javascript中使用vm|this.$refs.refname獲取子組件或原始DOM。若是原始DOM,則效果如document.querySelector(ele);若是子組件,則結(jié)果為一個VueComponent實例對象

Vue.component("component-1", {
    props: ["subProp"],
    data: function () {
        return {
            subData: "child"s data"
        }
    },
    template: "
子組件內(nèi)容
" }) Vue.component("component-2", { template: "
  • sub component
  • " }) var vm = new Vue({ el: "#app-1", data: { message: "send child"s props", subPropVal: "default", subDataVal: "default", commonDomVal: "default", items: [ { id: "1", case: "piece" }, { id: "2", case: "處刑之塔" }, { id: "3", case: "獵殺聯(lián)盟行動" } ] }, methods: { setVal: function () { this.subDataVal = this.$refs.child.subData this.subPropVal = this.$refs.child.subProp this.commonDomVal = this.$refs.common.value console.log(this.$refs.child) console.log(this.$refs.item) console.log(this.$refs.item2) }, } });

    獲取子組件data屬性[{{subDataVal}}]
    獲取子組件prop特性[{{subPropVal}}]
    獲取普通DOM元素值[{{commonDomVal}}]
    • {{item.case}}

    父組件數(shù)據(jù)定義:messagesubPropValsubDataValcommonDomVal和一個數(shù)組items
    子組件一中定義有:propssubProp、datasubData

    我們在一個組件和一個原始input上添加了ref特性,并把父組件的message通過Prop傳遞給子組件的subProp
    現(xiàn)在,就可以在綁定的按鈕單擊事件的回調(diào)中,通過this.$refs獲取組件和原始DOM的信息了,這些信息包括子組件的propsdatainput元素的value

    如果和v-for一起使用,那么this.$refs.refname返回的是一個數(shù)組,引用原始DOM為一個原始DOM的數(shù)組,引用子組件為一個VueComponent數(shù)組,如在上面的例子中使用v-for&ref把輸出打印在控制臺如下:

    混入(Mixins)

    在Vue中沒有通用的API來實現(xiàn)組件繼承的,但也有一些手段可以重復(fù)利用那些多個組件中相同的功能,比如這里的Mixin。當多個組件有相同屬性或方法時,可以抽取相同部分放入一個Mixins對象中。

    Vue.mixin({
        created: function () {
            console.log("全局混入對象")
        }
    })
    var superPowersMixin = {
        data: function () {
            return {
                superPowers: false,
                //不會覆蓋組件中的`img`
                img: require("./angular.png"),
            }
        },
        methods: {
            superMe: function () {
                this.$el.classList.add("super")
                this.superPowers = true
            },
            goback: function () {
                this.$el.firstChild.innerText = "Forever Stay Here"
            }
        },
        created: function () {
            this.$options.template =
                "" +
                "" +
                this.$options.template
        }
    }
    new Vue({
        el: "#app-1",
        components: {
            vueImage: {
                data: function () {
                    return { img: require("./vue.png") }
                },
                template: "
    ", methods: { goback: function () { this.$el.classList.remove("super") this.superPowers = false } }, //同名鉤子函數(shù)將混合為一個數(shù)組,因此都將被調(diào)用。混入對象的鉤子將在組件自身鉤子之前調(diào)用。 created: function () { this.$options.template = "
    " + this.$options.template + "
    " }, mixins: [superPowersMixin] }, reactImage: { data: function () { return { img: require("./react.png") } }, template: "
    ", created: function () { this.$options.template = "
    " + this.$options.template + "
    " }, mixins: [superPowersMixin] } } })
    
    

    在以上示例混入對象中,我們使用了屬性、模板、方法和鉤子函數(shù),對于不同的選項來說,我們有不同的合并規(guī)則。
    總體上來講,當選項是一個對象時,我們就合并成一個大的對象,如果對象中有重名的屬性時,我們就丟棄混入對象中的屬性。比如為組件vueImage添加混入時,屬性img和方法goback()就被丟棄。而鉤子函數(shù)混入和組件中的不合并,而是都執(zhí)行,先執(zhí)行混入中的鉤子,再執(zhí)行組件中的。

    模擬繼承

    利用混入可以模擬下繼承系統(tǒng)。

    var SuperClass = {
        template: "

    {{message}}

    ", data() { return { message: "super class data" } }, methods: { superMethod() { this.message = "run super class method to change data" } } } var SubClass = { mixins: [SuperClass], template: "

    {{message}}

    ", methods: { superMethod() { this.message = "override super class method" }, subMethod() { this.message = "run sub class method to change data" } } } new Vue({ el: "#app-2", components: { SuperClass, SubClass } })

    在這個例子中,為組件subClass混入了superClass,并從superClass那里繼承了屬性message,重寫了方法superMethod(),又添加了自己的方法subMethod()。感覺可以開發(fā)開發(fā)- -b。

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

    轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/51981.html

    相關(guān)文章

    • 組件(5):雜項

      摘要:全局混入對象不會覆蓋組件中的同名鉤子函數(shù)將混合為一個數(shù)組,因此都將被調(diào)用。而鉤子函數(shù)混入和組件中的不合并,而是都執(zhí)行,先執(zhí)行混入中的鉤子,再執(zhí)行組件中的。 組件引用 —— ref、$refs 給子組件或者原始DOM加上ref特性,就可以為其聲明引用標記,添加引用后,可以在Javascript中使用vm|this.$refs.refname獲取子組件或原始DOM。若是原始DOM,則效果如...

      GeekQiaQia 評論0 收藏0
    • Linux——Linux驅(qū)動之雜項設(shè)備(基本概念、注冊流程、雜項設(shè)備的驅(qū)動編寫)

      摘要:系列專欄博主結(jié)合工作實踐輸出的,解決實際問題的專欄,朋友們看過來開發(fā)實戰(zhàn)嵌入式通用開發(fā)實戰(zhàn)嵌入式開發(fā)實戰(zhàn) 【系列專欄】:博主結(jié)合工作實踐輸出的,解決實際問題的專欄,朋友們看過來! 《QT開發(fā)實戰(zhàn)》 《嵌入式通用開發(fā)實戰(zhàn)》 《嵌入式Linux開發(fā)實戰(zhàn)

      ISherry 評論0 收藏0
    • css雜項補充

      摘要:雜項補充雜項補充一塊與內(nèi)聯(lián)一塊與內(nèi)聯(lián)塊塊獨行顯示支持寬高,寬度默認適應(yīng)父級,高度默認由子級或內(nèi)容撐開設(shè)置寬高后,采用設(shè)置的寬高內(nèi)聯(lián)內(nèi)聯(lián)同行顯示不支持寬高上下無效果,左右會起作用,不會影響它的高度,背景會影響。css雜項補充 一、塊與內(nèi)聯(lián) 1.塊 獨行顯示 支持寬高,寬度默認適應(yīng)父級,高度默認由子級或內(nèi)容撐開 設(shè)置寬高后,采用設(shè)置的寬高 2.內(nèi)聯(lián) 同行顯示 不支持寬高 margin上下無...

      greatwhole 評論0 收藏0

    發(fā)表評論

    0條評論

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