Vue基礎知識之元件及元件之間的資料傳遞(五)

2022-07-17 10:15:12 字數 2639 閱讀 6794

vue中的元件是自定的標籤,可以擴充套件的原生html元素,封裝可復用的**

note:

1、在標籤命中不要使用大寫,標籤名字必須用短橫線隔開

2、模板中只能有乙個根元素,不能使用並列標籤。

hello

world

let data=

vue.component('mycomponent',;//此時不能return data;這樣會導致如果有多個例項運用這個元件會導致,三者共享同乙個data,改變其中乙個,會導致其他的都改變。物件變數會導致共享資料。

})此時就可以在例項中使用my-component標籤。

let vm=new vue(,

components:;

}} }

})1、子元件不能直接使用父元件的資料

2、子元件可以宣告自己的資料

1、每個元件是沒關係的,都應該產生自己的資料。在元件中data使用的方法和預設的vm一樣。只是data不再是物件而是函式。元件可以無限巢狀。

2、宣告元件的名字,不能為已經存在的標籤

3、元件的巢狀,子元件必須寫在父組建的模板中才能使用

1、如果直接寫a='b'格式傳遞的是字串,動態資料獲取用的是v-bind,一般無論是動態還是靜態,我們都會採用:。

2、:msg='meat',meat是變數;msg='meat',meat是字串,:msg="'meat'",meat是字串

3、子級不能直接改變父級的資料,如果要修改可以將父級的資料修改後賦值給子級的變數,可以使用data或者computed

//此處,在子元件中左邊的是子元件的接收,用props接收,如果是放在陣列中每一項就是乙個字串,右邊是從父級傳遞的資料。

props中的validate

1、props:['xx','yy','zz'];

2、props:

required:true,//代表屬性必須填

}}

1、子級$emit後會觸發自己身上的某乙個自定的方法,這個方法對應的函式在父級的身上。
//自定義方法寫在自己身上,右邊的是父級對應方法的函式

let vm1 = new vue(,

methods:

},components: }

`,//繫結觸發事件

methods:

},data()}}

}})

1、兄弟之間傳遞資料需要借助於事件車,通過事件車的方式傳遞資料eventbus

2、建立乙個vue的例項,讓各個兄弟共用同乙個事件機制。

3、傳遞資料方,通過乙個事件觸發bus.$emit(方法名,傳遞的資料)。

4、接收資料方,通過mounted(){}觸發bus.$on(方法名,function(接收資料的引數)),此時函式中的this已經發生了改變,可以使用箭頭函式。

具名slot,通過元件傳入模板,每個模板指定是slot名字,這個名字和定製模板匹配到,會替換定製的模板。

slot是vue中提供的乙個標籤,用來做模板定製的。屬性,事件,定製模板組成了元件的api。

**使用slot分發內容**

為了讓元件可以組合,我們需要一種防暑混合父元件的內容與子元件自己的模板。這個過程被稱作內容分發(transclusion),vue.js實現了乙個內容分發api,使用特殊的元素作為原始內容的插槽。

**編譯作用域**

父元件模板的內容在父元件作用域內編譯;子元件模板的內容在子元件作用域內編譯。

**單個slot**

除非子元件模板包含至少乙個 插口,否則父元件的內容將會被丟棄。當子元件模板只有乙個沒有屬性的 slot 時,父元件整個內容片段將插入到 slot 所在的 dom 位置,並替換掉 slot 標籤本身。

最初在 標籤中的任何內容都被視為備用內容。備用內容在子元件的作用域內編譯,並且只有在宿主元素為空,且沒有要插入的內容時才顯示備用內容。

**具名slot**

元素可以用有個特殊的屬性name來配置如何分發內容。多個slot可以有不同的名字。具名slot將匹配內容片段中對應slot特性的元素。但任然可以有乙個匿名slot,它是預設的slot,作為找不到匹配的內容片段的備用插槽。如果沒有預設的slot,這些找不到匹配的內容將被拋棄。

元件在它的模板內可以遞迴地呼叫自己。recursive 遞迴元件,自己呼叫自己,必須有中斷條件。

預設情況下,遞迴元件是不會執行的,要制定name屬性(只在區域性元件中需要新增),全域性逐漸不需要加name屬性。

is可以指定當前標籤內可以指定插入什麼元素,可以防止解析出錯。

radio中預設沒有繫結資料,要給value值,這個value值會對映到radio上

Vue 元件 元件之間的通訊 之全域性元件與區域性元件

在上篇部落格中介紹了元件,在註冊元件的簡寫中就用到了全域性元件 註冊元件的簡寫方式 vue.component my componenta 元件可分為全域性元件與區域性元件 全域性元件 在全域性api中的vue.component註冊 該專案中所有vue例項內均可以使用 區域性元件 在vue例項中的...

Vue基礎知識簡介5 元件之間傳參 axios

components 嵌入模板 my slot 動態模板 myparent my slot 父元件的姓名 父元件的年齡 子元件的姓名 子元件的年齡 row slot 動態元件 快取 my hello my hello1 hello hello1 父將引數傳給子 components componen...

php元件 SQL基礎知識

hypertext preprocessor 嵌入thml文件的指令碼程式語言,動態 的開發語言 www.php.net php,asp,ruby,c,bash 有程式功能的直譯器 php通過庫呼叫完成操作檔案 bash通過內部程式 foo directive value mysql mysqli ...