vue组件之间的传值

组件之间的传值分为3种：

1. 父 —>子 父组件给子组件传值
2. 子 —>父 子组件给父组件传值
3. 非父子组件传值

方法：

1. 父—>子

//父组件通过给子组件定义属性传值
<div id='app'>
	//通过绑定属性的方式，money是你自己定义的，msg是要传给子组件的值
	<son :money='msg'></son>
</div>
 //   子组件的模板-->
<template id="son1">
    <div>
        <p>我是子组件--</p>
        <button @click="clickFn">aa</button>
    </div>
</template>
//js代码
//子组件
Vue.component('son',{
    template:'#son1',
    data(){
        return {
            msg:'foo'
        }
    },
    //使用props来接受父组件传来的数据
    props:['money'],
    methods:{
        clickFn(){
            console.log(this.money)
        }
    }
});
//父组件
const vm = new Vue({
    el: '#app',
    data: {
       	money:200
    },
});

2. 子—>父

    <div id="app">
    //父组件给子组件定义一个事件，当子组件触发这个事件是调用父组件里的一个方法
        <son @get="getMsg"></son>
        {{msg}}
    </div>

    <template id="son1">
        <div>
            <input type="text" v-model="msg">
            //添加点击事件
            <button @click="send">给父组件传值</button>
        </div>
    </template>
    //js代码
    Vue.component('son',{
    template:'#son1',
    data(){
        return {
            msg:''
        }
    },
    methods:{
        send(){
        //在子组件种手动调用它身上父组件给它定义的事件，并传递参数
            this.$emit('get',this.msg)
        }
    }
});
const vm = new Vue({
    el: '#app',
    data: {
        msg: ""
    },
    methods:{
    //在父组件的方法中定义一个方法，并设置其形参
        getMsg(msg){
            console.log(msg);
            //这样父组件就通过形参的方式拿到了子组件传来的值
            this.msg=msg;
        }
    }
})

3. 非父子之间的传值

//组件一的模板
    <div id="app">
        {{getMsg}}
    </div>
  //组件二的模板
    <div id="app2">
        <button @click="fn">chuan</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        //定义一个空Vue对象
        const bus=new Vue();
//组件一
        const vm = new Vue({
            el: '#app',
            data: {
                msg: "小傻瓜",
                getMsg:''
            },
            created(){
            //在组件一初始化数据后就给bus注册一个事件，通过$on的方式
                bus.$on('get',(msg)=>{
                //等谁调用bus身上的这个方法给它传个值，组件一就可以拿到这个值了
                    this.getMsg=msg;
                })
            }
        });
        const vm2 = new Vue({
            el: '#app2',
            data: {
                msg: "大傻子"
            },
            methods:{
                fn(){
                //在这个方法里手动调用bus身上的get事件，并将你想传递过去的值写在参数中即可
                    bus.$emit('get',this.msg)
                }
            }
        })
    </script>

或使用vuex