lovecoding
/
W250913


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <!-- 组件传参 父组件给子组件传参通过属性绑定的方式 -->
            <!-- 父组件中可以使用变量的方式给子组件传参 但一定要用v-bind指令绑定 -->
            <box v-bind:val="i"></box>
            <box v-bind:val="j"></box>
        </div>
    </div>
    <template id="box-temp">
        <div>
            <h1 @click="addFun">{{num2}}</h1>
        </div>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data:{
                i:10,
                j:20
            },
            components:{
                "box":{
                    template:"#box-temp",
                    data(){
                        return{
                            // 子组件中可以使用props接受父组件传参
                            // 为了避免直接修改props中的值 所以在data中重新定义一个属性接受props中的值
                            num2:this.val
                        }
                    },
                    // 组件传参 子组件接收父组件传参通过props属性的方式
                    // 可以接受多个参数所以用数组的方式
                    // props 接受的值不可以在子组件中修改
                    props:["val"],
                    methods:{
                        addFun(){
                            this.num2++
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>