<!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件传参数</title> </head> <body> <div id="box"> <zj my-message="你好，你好"></zj> </div> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> Vue.component('zj',{ // 像function一样，声明组件的参数名称； props:['myMessage'], // 传进来以后，你可以在组件下的模板中使用这个数据 template:'<span>{{myMessage}}</span>' }) var vm=new Vue({ el:'#box', }) //在html 不能用驼峰命名，因为html的属性是区分大小写的。 //用短横线命名，myMessage会自动转换成这种形式。 </script> </html> --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态传参数</title> </head> <body> <div id="box"> <dong v-bind:meg='dongval'></dong> </div> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> Vue.component('dong',{ props:['meg'], template:'<span>{{meg}}</span>' }) new Vue({ el:'#box', data:{ dongval:'动态参数' } }) // 注意v-bind:my-message="parentMsg",这样就把一个动态，响应式的对象传给了子组件。结合前面学过的知识，我们进一步认识到v-bind有把死的变活的功效。 // Vue.component('example', { // props: { // // 基础类型检查 (`null` 表示可以接受任何类型) // propA: Number, // // 多个类型限定 // propB: [String, Number], // // 必填限制 // propC: { // type: String, // required: true // }, // // 默认值设置 // propD: { // type: Number, // default: 100 // }, // // 对象/数组 默认值需要用闭包返回 // propE: { // type: Object, // default: function () { // return { message: 'hello' } // } // }, // // 自定义验证条件 // propF: { // validator: function (value) { // return value > 10 // } // } // } // }) </html>