Vue Component 单向数据流

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <box2 :total="appCount"></box2>
    </div>
    <template id="button_counter">
        <button @click="count++">点{{count}}次</button>
    </template>
    <template id="div_box2">
        <p>total:{{total}}</p>
        <button @click="total++">btn1</button>
        <p>myTotal:{{myTotal}}</p>
        <button @click="myTotal++">btn2</button>
        <div style="background-color: red">div_box2<button-counter></button-counter></div>
    </template>
    <script src="js/vue.3.2.2.js"></script>
    <script>
        //注册一个局部组件
        const Counter={
            data(){
                return{
                    count: 0
                }
            },
            template:'#button_counter'
        }

        const Box={
            props:{
                total:Number
            },
            data(){
                return{
                    myTotal:this.total
                }
            },
            components: {
                'button-counter':Counter
            },
            template:'#div_box2'
        }

        // 1、创建Vue的实例对象
        const app = Vue.createApp({
            data(){//定义数据
                return {
                    msg:'你好！',
                    appCount:100
                }
            },
            components:{
                // 'button-counter':Counter,
                'box2':Box
            }
        }).mount('#app');
    </script>
</body>
</html>

 

posted @ 2021-08-24 16:21  残星  阅读(73)  评论(0)    收藏  举报