zoukankan      html  css  js  c++  java
  • 深入了解Vue组件 — Prop(上)

    1.Prop

    1.1 Prop的大小写

    HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">      
            <style>
                
            </style>
            <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        </head>
        <body>
    		<div id="app">
    			<blog-post post-title="hello!"></blog-post>
    		</div>
            <script>
    			Vue.component('blog-post', {
    			  // 在 JavaScript 中是 camelCase 的
    			  props: ['postTitle'],
    			  template: '<h3>{{ postTitle }}</h3>'
    			})
    			
    			new Vue({
    				el: '#app',
    				data: {
    					
    				}
    			});
            </script>
        </body>
    </html>
    

    注意到在JavaScript中使用postTitle(驼峰命名法),在自定义组件<blog-post>中使用post-title(短横线分隔命名法)。

    1.2 Prop 类型

    一般情况下,我们以字符串数组形式列出的 prop。

    props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
    

    我们可以以对象形式列出prop。这些属性的名称和值分别是 prop 各自的名称和类型。

    props: {
      title: String,
      likes: Number,
      isPublished: Boolean,
      commentIds: Array,
      author: Object,
      callback: Function,
      contactsPromise: Promise // or any other constructor
    }
    

    1.3 传递动态Prop

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">      
            <style>
                
            </style>
            <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        </head>
        <body>
            <div id="app">
                <blog-post v-bind:title="post.title"></blog-post>
            </div>
            <script>
                Vue.component('blog-post', {
                  props: ['title'],
                  template: '<h3>{{ title }}</h3>'
                })
                
                new Vue({
                    el: '#app',
                    data: {
                        post: {
    						title: 'Hello'
    					}
                    }
                });
            </script>
        </body>
    </html>
    

    1.3.1 传入一个数字

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">      
            <style>
                
            </style>
            <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        </head>
        <body>
            <div id="app">
                <blog-post v-bind:likes="42" v-bind:likes1="post.likes1"></blog-post>
            </div>
            <script>
                Vue.component('blog-post', {
                  props: {
    				likes: Number,
    				likes1: String,
    			  },
                  template: '<div><p>{{ typeof likes }}</p><p>{{ typeof likes1 }}</p></div>'
                })
                
                new Vue({
                    el: '#app',
                    data: {
    					post: {
    						// likes1: 10
    						likes1: '10'
    					}
                    }
                });
            </script>
        </body>
    </html>
    

    注意:v-bind:likes="42"通过v-bind告诉 Vue 42是一个JavaScript表达式,而不是字符串;v-bind:likes1="post.likes1"则是用一个变量动态赋值。

    1.3.2 传入一个布尔值

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">      
            <style>
                
            </style>
            <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        </head>
        <body>
            <div id="app">
    			<!-- 包含该 prop 没有值的情况在内,都意味着 `true`。-->
                <blog-post is-published></blog-post>
    			<blog-post v-bind:is-published="false"></blog-post>
    			<blog-post v-bind:is-published="post.isPublished"></blog-post>
            </div>
            <script>
                Vue.component('blog-post', {
                  props: {
    				isPublished: Boolean,
    			  },
                  template: '<div><p>{{ isPublished }} - {{ typeof isPublished }}</p></div>'
                })
                
                new Vue({
                    el: '#app',
                    data: {
    					post: {
    						isPublished: false
    					}
                    }
                });
            </script>
        </body>
    </html>
    

    1.3.3 传入一个数组

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">      
            <style>
                
            </style>
            <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        </head>
        <body>
            <div id="app">
    			<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
    			<blog-post v-bind:comment-ids="post.commentIds"></blog-post>
            </div>
            <script>
                Vue.component('blog-post', {
                  props: {
    				commentIds: Array,
    			  },
                  template: '<ul><li v-for="(commentId, index) in commentIds" :key="index">{{ commentId }}</li></ul>'
                })
                
                new Vue({
                    el: '#app',
                    data: {
    					post: {
    						commentIds: [1, 2, 3]
    					}
                    }
                });
            </script>
        </body>
    </html>
    

    1.3.4 传入一个对象

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">      
            <style>
                
            </style>
            <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        </head>
        <body>
            <div id="app">
    			<blog-post v-bind:author="{name: 'Veronica', company: 'Veridian Dynamics'}"></blog-post>
    			<blog-post v-bind:author="post.author"></blog-post>
            </div>
            <script>
                Vue.component('blog-post', {
                  props: {
    				author: Object,
    			  },
                  template: '<div><p>name: {{ author.name }}</p><p>company: {{ author.company }}</p></div>'
                })
                
                new Vue({
                    el: '#app',
                    data: {
    					post: {
    						author: {name: 'Hjj', company: 'unknown'}
    					}
                    }
                });
            </script>
        </body>
    </html>
    

    1.3.5 传入一个对象的所有属性

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">      
            <style>
                
            </style>
            <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        </head>
        <body>
            <div id="app">
    			<blog-post v-bind="post"></blog-post>
            </div>
            <script>
                Vue.component('blog-post', {
                  template: '<div><p>hello</p></div>'
                })
                
                new Vue({
                    el: '#app',
                    data: {
    					post: {
    						id: 1,
    						title: 'What'
    					}
                    }
                });
            </script>
        </body>
    </html>
    

    参考:

  • 相关阅读:
    解决:transform-decorators-legacy 报错
    leetcode刷题笔记 232题 用栈实现队列
    leetcode刷题笔记 231题 2的幂
    leetcode刷题笔记 230题 二叉搜索树中第K小的元素
    leetcode刷题笔记 229题 求众数II
    leetcode刷题笔记 228题 汇总区间
    leetcode刷题笔记 227题 基本计算器II
    leetcode刷题笔记 225题 用队列实现栈
    leetcode刷题笔记 224题 基本计算器
    leetcode刷题笔记 223题 矩形面积
  • 原文地址:https://www.cnblogs.com/gzhjj/p/11772526.html
Copyright © 2011-2022 走看看