组件传参 

<!-- <!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>

 

posted @ 2017-10-12 14:08  Jinsuo  阅读(179)  评论(0)    收藏  举报