vue2.0的静态和动态prop

1、动态

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../vue2.2.js"></script>
    </head>
    <body>
        <div id="app">
            <div>
                <input v-model='parentMsg' />
                <br />
                <child v-bind:my-Message="parentMsg"></child>
                <!--可以理解成var mymesage = parentMsg;-->
            </div>
        </div>
        <template id="simpleDemo">
            <div>
                {{myMessage}}
            </div>
        </template>
        <script>
            /*props可以是数组或者是对象,用于接收父组件的数据.
                props 对象允许配置高级选项,HTML特性不区分大小写,名字形式为驼峰式的prop作为特性时,我们
                需要转为 a-b (短横线隔开)*/
            var vm = new Vue({
                el: "#app",
                data: {
                    parentMsg: "hello Prop"
                },
                components: {
                    'child': {
                        template: "#simpleDemo",
                        props: ["myMessage"], //自定义名字
                        /*props:{
                            type:String,
                            required:true
                        },
                        props:{
                            type:Number,
                            default:100
                        }*/
                    }
                }
            })
        </script>
    </body>


</html>



2、静态

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../vue2.2.js"></script>
        <link rel="stylesheet" href="styles/demo.css" />
    </head>
    <body>
        <div id="app">
            <my-component :my-name="name" :my-age="age"></my-component>
        </div>
        <template id="myComponent">
            <table>
                <tr>
                    <th colspan="2">子组件</th>
                </tr>
                <tr>
                    <td>名字</td>
                    <td>年龄</td>
                </tr>
                <tr>
                    <td>{{myName}}</td>
                    <td>{{myAge}}</td>
                </tr>
            </table>
        </template>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    name: "小明",
                    age: 24
                },
                components: {
                    'my-component': {
                        template: "#myComponent",
                        props: ["myName", "myAge"]
                    }
                }
            })
        </script>
    </body>


</html>

标注:

如果想传递一个真正的 JavaScript 数值,则需要使用 v-bind,从而让它的值被当作 JavaScript 表达式计算:

<!-- 传递真正的数值 -->
<comp v-bind:some-prop="1"></comp>
因为它是一个字面量 prop,它的值是字符串 "1" 而不是一个数值。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值