十七、Component 组件props 属性设置

最新推荐文章于 2025-05-30 09:07:34 发布

原创最新推荐文章于 2025-05-30 09:07:34 发布 · 4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#属性

Vue 专栏收录该内容

34 篇文章

订阅专栏

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>