亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue.component的屬性說明

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

Vue.component的屬性

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

1.template

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

使用：直接接字符串

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

2.data

作用：

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

定義：

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

使用：

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

3.methods

作用：

定義一個在組件中使用的方法

定義：

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

4.props

作用：

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

定義：

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

與data中的區(qū)別：

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

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

Vue的component標(biāo)簽

作用

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

is屬性

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

在這里插入圖片描述

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

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

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

在這里插入圖片描述

在這里插入圖片描述

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

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

相關(guān)文章

最新評論