十七、Component 组件props 属性设置

                   Component 组件props 属性设置


    所谓组件就是自定义一个标签,设置标签里面的属性。

    props选项就是设置和获取标签上的属性值的,例如我们有一个自定义的组件,这时我们想给他加个标签属性写成 意思就是熊猫来自中国,当然这里的China可以换成任何值。定义属性的选项是props。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>component-2</title>
</head>
<body>
    <h1>component-2</h1>
    <hr>
    <div id="app">
        <panda here="China"></panda>
    </div>

    <div id="app2">
        <panda v-bind:here="message"></panda>
    </div>


    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            components:{
                "panda":{//定义一个局部组件
                    template:`<div style="color:red;">Panda from {{ here }}.</div>`,
                    props:['here']//为组件定义一个属性here
                    //我们在写属性时经常会加入’-‘来进行分词,
                    // 比如:,那这时我们在props里如果写成props:[‘form-here’]是错误的,
                    // 我们必须用小驼峰式写法props:[‘formHere’]。
                }
            }
        })

        //使用v-bind指令获取数据
        var app2=new Vue({
            el:'#app2',
            data:{
                message:'SiChuan=='
            },
            components:{
                "panda":{
                    template:`<div style="color:red;">Panda from {{ here }}.</div>`,
                    props:['here']
                }
            }
        })
    </script>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值