Vue Component 動態綁定傳參

本文轉載自查看原文 2021-08-24 16:35 374 Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <box2 :num1="a" :num2="b" :num3="c" :num4="d"></box2>
        <box2 v-bind="numObj"></box2>
    </div>
    <template id="button_counter">
        <button @click="count++">點{{count}}次</button>
    </template>
    <template id="div_box2">
        <p>num1:{{num1}}</p>
        <p>num2:{{num2}}</p>
        <p>num3:{{num3}}</p>
        <p>num4:{{num4}}</p>
        <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,
                num1:String,
                num2:String,
                num3:String,
                num4:String
            },
            data(){
                return{
                    myTotal:this.total
                }
            },
            components: {
                'button-counter':Counter
            },
            template:'#div_box2'
        }

        // 1、創建Vue的實例對象
        const app = Vue.createApp({
            data(){//定義數據
                return {
                    msg:'你好！',
                    appCount:100,
                    a:100,
                    b:200,
                    c:300,
                    d:400,
                    numObj:{
                        num1:100,
                        num2:200,
                        num3:300,
                        num4:400
                    }
                }
            },
            components:{
                // 'button-counter':Counter,
                'box2':Box
            }
        }).mount('#app');
    </script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue :class的動態綁定 vue動態綁定屬性--動態綁定style vue動態綁定屬性--基本用法及動態綁定class Vue中Class與Style如何動態綁定 vue中使用：class 動態綁定 vue如何動態綁定v-model vue 動態綁定 class style Vue.js 動態綁定class vue動態綁定類名 class vue中的動態綁定樣式