欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue.component的屬性說明

 更新時(shí)間：2022年03月29日 08:52:47   作者：程序員徐小白  
這篇文章主要介紹了Vue.component的屬性說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue.component的屬性

Vue.component(‘組件名稱’，{})中的屬性

1.template

作用：用來定義組件的html模板

使用：直接接字符串

Vue.component('組件名稱'，
{
template:'<p>aaa</p>'
})

2.data

作用：

定義一個(gè)在組件中使用的數(shù)據(jù)

定義：

Vue.component('組件名稱'，
{
?? ?data:fuction(){
?? ??? ?return(
?? ??? ??? ?msg:'aa'
?? ??? ??? ?//每個(gè)組件使用的數(shù)據(jù)都是獨(dú)立的
?? ??? ??? ?//每個(gè)數(shù)據(jù)都是新創(chuàng)建的
?? ??? ??? ?//就算用的是同一個(gè)組件模板
?? ??? ??? ?//var a=0
?? ??? ??? ?//而直接return a
?? ??? ??? ?//則會(huì)多個(gè)頁面上的組件同時(shí)使用同一個(gè)數(shù)據(jù)源
?? ??? ?)
?? ?}
})

使用：

使用插值表達(dá)式{undefined{msg}}

3.methods

作用：

定義一個(gè)在組件中使用的方法

定義：

Vue.component('組件名稱'，
{
?? ?methods:{
?? ??? ?方法名(){}
?? ?}
})

4.props

作用：

將父組件的數(shù)據(jù)傳遞到子組件

定義：

Vue.component('組件名稱'，
{
props:['對(duì)接父組件數(shù)據(jù)的名稱'],
})

與data中的區(qū)別：

props是從父組件傳遞過來的，只能讀取，不能修改父組件中的值

data是子組件私有的，可讀可寫 

Vue的component標(biāo)簽

作用

可以在一個(gè)組件上進(jìn)行多樣化渲染。例如：選項(xiàng)卡

is屬性

    <div id="father">
        <component is="one"></component>
        <component is="two"></component>
    </div>
    <script>
        Vue.component('one', {
            template: `
            <div>我是第一個(gè)組件</div>
            `
        })
        Vue.component('two', {
            template: `
            <div>我是第二個(gè)組件</div>
            `
        })
        let vm = new Vue({
            el: "#father"
        })
    </script>

在這里插入圖片描述

可以看到通過coponent的is屬性可以綁定不同的組件，渲染不同的模板。

那么我們是不是可以通過這個(gè)屬性來完成一個(gè)屬性多種模板的效果呢

   <div id="app">
             <button @click="onclick('hc-c')">顯示第一個(gè)</button>
             <button @click="onclick('hc-b')">顯示第二個(gè)</button>
             
            <component :is="name"></component>    
    </div>
    <script>
        Vue.component('hc-c', {
            template: `
                <div>我是第一個(gè)</div>
            `
        })
        Vue.component('hc-b', {
            template: `
                <div>我是第二個(gè)</div>
            `
        })
        let vm = new Vue({
            el: "#app",
            data:{
                name:''
            },
            methods:{
                onclick(item){
                    this.name = item;
                }
            }
        })
    </script>

在這里插入圖片描述

在這里插入圖片描述

可以看到，通過這個(gè)is屬性，我們可以達(dá)到選項(xiàng)卡的效果

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論