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

作用：

定義一個在組件中使用的數據

定義：

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

使用：

使用插值表達式{undefined{msg}}

3.methods

作用：

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

定義：

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

4.props

作用：

將父組件的數據傳遞到子組件

定義：

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

與data中的區(qū)別：

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

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

Vue的component標簽

作用

可以在一個組件上進行多樣化渲染。例如：選項卡

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>

在這里插入圖片描述