25_test_组件间通信

作者: CHENPEIHUANG | 来源:发表于2018-02-11 07:00 被阅读0次

25_test_组件间通信
React组件间通信
vue.js系列三:组件间通信
vue 组件通信方式，父子、隔代、兄弟三类通信，六种方法
Vue组件间通信,与服务器端通信
<Vue2.x>总结：注意点
Vue基础-03 组件间的通信
React父子组件间通信的实现方式
组件间通信
Vue组件间通信方式都有哪些?


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <!--<my-input type="价格" @input="val=>price=val" :value="price"></my-input>
            <my-input type="数量" @input="val=>count=val" :value="count"></my-input>-->
            
            <my-input type="价格" v-model="price"></my-input>
            <my-input type="数量" v-model="count"></my-input>
            <my-input type="折扣" v-model="discount"></my-input>
            <p>运费：{{fre}}</p>
            <p>总价:{{total}}</p> 
        </div>
        
        <script type="text/javascript" src="js/vue.js" ></script>
        <script>
            Vue.component('my-input',{
                template:"<div><label>{{type}}:</label> <input :value='value' @keyup='myInput'/></div>",
                props:['type','value'],
                data(){
                    return {
                        val:this.value
                    }
                },
                methods:{
                    myInput(ev){
                        this.val=ev.target.value;
                        //将this.val传递给父组件
                        this.$emit('input',this.val);//触发父组件中定义的对应事件执行
                    }
                }
            });
            var vm=new Vue({
                el:"#app",
                data:{
                    price:50,
                    count:1,
                    discount:1
                },
                computed:{
                    total(){
                        return this.price*this.count*this.discount+this.fre;
                    },
                    fre(){
                        if(this.price*this.count*this.discount>=500){
                            return 0;
                        }else{
                            return 20;
                        }
                    }
                }
            })
            
            
        </script>
    </body>
</html>