vue組件參數校驗與非props特性

時間 2019-11-17

標籤 vue 組件參數校驗 props 特性简体版

原文原文鏈接

組件參數校驗html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>vue</title>
 6     </head>
 7     <body>
 8         <div id="app">
 9             <child :content="'abc'"></child>
10         </div>        
11         
12         <!-- 開發環境版本，包含了用幫助的命令行警activeOne告 -->
13         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
14         <script>
15             Vue.component('child', {
16                 props: {
17                     content: {
18                         //參數校驗
19                         type: String,//:content的類型，也能夠寫[String, Number]
20                         required: true,//:content是否必須寫，true是必須，false是沒必要須
21                         default:　'default value',//若required:false時，頁面顯示的默認值
22                         validator: function(value) {//自定義校驗器
23                             return (value.length > 5)
24                         }
25                     }
26                 },
27                 template: '<div>{{content}}</div>'
28             })
29             var app = new Vue({
30                 el: '#app'
31             })
32         </script>
33     </body>
34 </html>

props特性
子組件有props,父組件傳遞content,子組件接收content
非props特性
父組件傳遞content,子組件沒有props,沒接收content。一、使用content時報錯。二、content屬性會展現在子組件最外層的dom標籤html屬性裏面vue

相關標籤/搜索