组件的props属性（15）

一、定义属性并获取属性值

props选项就是设置和获取标签上的属性值的，例如我们有一个自定义的组件<com1></com1>,如果要给它加个lll的属性，props要写在组件里，并且是以数组的形式 ，因为可能要放好几个属性。在组件的模板里读出属性值只需要用插值的形式{{}}

<div id="app">
    <h1>{{msg}}</h1>
    <com1 lll="哈哈哈哈"></com1>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            msg:"HelloWorld"
        },
        components:{
            "com1":{
                template:`<h2>局部组件1{{lll}}</h2>`,
                props:[`lll`]
            }
        }
    });
</script>

image.png

image.png

传入属性的名字不能在中间加“-”,要用小驼峰的命名方式。

请注意，对于自定义标签的命名 Vue.js 不强制遵循 W3C 规则 (小写，并且包含一个短杠)，尽管这被认为是最佳实践。

image.png

二、在构造器里向组件中传值

<div id="app">
    <h1>{{msg}}</h1>
    <com1 v-bind:lll="msg"></com1>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            msg:"HelloWorld"
        },
        components:{
            "com1":{
                template:`<h2>局部组件{{lll}}</h2>`,
                props:[`lll`]
            }
        }
    });
</script>

把构造器里data的数据传给组件，使用的是v-bind:属性名="data属性名"指令