props简单小栗子

props简单小栗子

可以直接copy查看结果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>

<body>
    <div id="app1">
        <child msg="hello!"></child>
        <child nihao="hello1!"></child>
        <child nisha="hello2!"></child>
    </div>
    <script>
        Vue.config.debug = true;
        Vue.component('child', {
            // declare the props
            props: ['msg', 'nihao', 'nisha'],
            // the prop can be used inside templates, and will also
            // be set as `this.msg`
            template: '<span>{{ msg }}{{nihao}}{{nisha}}</span>',
            /*data: function() {
            return {
            msg: 'boy'
            }
            }*/
        });
        var vm = new Vue({
            el: '#app1'
        })
    </script>
</body>

</html>

 

posted @ 2018-07-26 07:50  Fanyee  阅读(143)  评论(0)  编辑  收藏  举报