子组件向父组件传值

作者: 椰果粒 | 来源:发表于2018-08-03 10:34 被阅读0次

ReactNative组件间的通信
Vue.js父子组件传值
vue不同组件间传值方式
vue 中传值（父传子、子传父（传递多个事件）、eventBus
Vue - 传值
Vue.js父子组件和非父子组件间的传值通信
vue单文件父子组件之间的通信
vue 组件之间传值方法
Vue父子组件之间的传值
子组件向父组件传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <!-- 
        父组件向子组件传值：
            属性方式
            子组件通过props来接收父组件传递来的数据
        单向数据流：
            父组件可以随意的向子组件传递参数，但子组件不可以随意修改父组件的内容，只可以用
            因为担心父组件数据改变了后，其他引用了此子组件的值也就改变了
        解决方式：子组件有个data，复制一份父组件的值
     -->
    <div id="app">
        <counter :count="0" @change="inc"></counter>
        <counter :count="1" @change="inc"></counter>
        <div>总数是：{{total}}</div>
    </div>
    <script>
        var counter = {
            props : ['count'],
            template : '<div @click="add">{{num}}</div>',
            data : function(){
                return {
                    num : this.count
                }
            },
            methods : {
                add : function(){
                    this.num ++;
                    // 向父组件：自己发生改变，步长是1
                    this.$emit("change",1);
                }
            }
        }
        var vm = new Vue({
            el : "#app",
            data : {
                total : 1
            },
            components : {
                counter : counter
            },
            methods : {
                // step就是步长，也就是emit传递过来的
                inc : function(step){
                    // alert('inc');
                    // console.log(step);
                    this.total += step;
                }
            }
            
        })
    </script>
</body>
</html>