十七、Component 组件props 属性设置

た入场券 2022-05-03 07:57 427阅读 0赞

#                    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>