vue2.0 静态prop和动态prop

动态prop:

复制代码
<!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>
复制代码

静态prop:

复制代码
<!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>
复制代码

 

posted @   鱼樱前端  阅读(4147)  评论(0编辑  收藏  举报
编辑推荐:
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
阅读排行:
· 回顾我的软件开发经历(1)
· 不到万不得已,千万不要去外包
· C# WebAPI 插件热插拔(持续更新中)
· .NET 9 new features-C#13新的锁类型和语义
· 会议真的有必要吗?我们产品开发9年了,但从来没开过会
 
往后余生 - 王贰浪
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.
  1. 1 往后余生 王贰浪
  2. 2 拂雪 不才
  3. 3 我的一个道姑朋友 洛尘鞅
  4. 4 大田后生仔 王雨萌
点击右上角即可分享
微信分享提示