Vue组件prop属性 | 易学教程

1，prop的大小写
HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名
2，传递prop
传入一个静态的值

<body>
    <div id="example">
        <blog-post title="my name is ddd"></blog-post>
    </div>
    <script>
        // 注册
        Vue.component('blog-post', {
           props:["title"],
           template:'<h3>{{ title }}</h3>'
        })
        // 创建根实例
        new Vue({
            el: '#example'
        })
    </script>
</body>

2，传入一个对象的所有属性

<body>
    <div id="example">
        <div :style="{fontSize:postFontSize+'em'}">
            <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post" 
            v-on:enlarge-text="postFontSize +=$event">
            </blog-post>
        </div>
    </div>
    <script>
        // 注册
        Vue.component('blog-post', {
            props: ["post"],
            template: `
                    <div class="blog-post">
                    <h3>{{ post.id }}</h3>
                    <h3>{{ post.title }}</h3>
                    <button v-on:click="$emit('enlarge-text',0.1)">Enlarge text</button>
                    <div v-html="post.content"></div>
                    </div>
                    `
            })
            // 创建根实例
            new Vue({
                el: '#example',
                data: {
                    posts: [
                        { id: 1, title: 'aaaaaaaaaaaa' ,content:'mjhdurfbhvbdsjdnc' },
                        { id: 2, title: 'bbbbbbbbbbbb',content:'mjhdurfbhvbdsjdnc' },
                        { id: 3, title: 'cccccccccccc' ,content:'mjhdurfbhvbdsjdnc'},
                    ],
                    postFontSize:2
                }
            })
        </script>
</body>

来源：CSDN

作者：芭比芭比Q

链接：https://blog.csdn.net/weixin_46044574/article/details/104752153

标签

post

vue