Vue组件间传值

props

实例一 通过props向子组件传递数据

	<div id="app">
        <component1 :cnum="num"></component1>
    </div>

    <template id="comp1">
        <h1>{{ cnum }}</h1>
    </template>

<script src="js/vue.js"></script>
    <script>
        Vue.component('component1', {
            template: `#comp1`,
            props: ['cnum']
        })

        new Vue({
            el: "#app",
            data: {
                num: 1
            }   
        })
    </script>

实例二 点击按钮改变 num 值 $emit()

 	<div id="app">
        <!-- <component2 @cchange="change()">增加</component2> -->
        <component2 @cchangep="changep(10)">增加</component2>
    </div>
     <template id="comp2">
     	<div>
        	<!-- <button @click="$emit('cchange')">增1</button> -->
        	<button @click="$emit('cchange')">增10</button>
        </div>
    </template>

<script src="js/vue.js"></script>
    <script>
        Vue.component('component2', {
            template: `#comp2`
        })
        new Vue({
            el: "#app",
            data: {
                num: 1
            },
            methods: {
            /*
                change() {
                    this.num ++
                }
                */
                changep(val) {
                    this.num += val
                }
            }
        
        })
    </script>