vue中非父子组件之前传值；父子组件之间传值；父组件触发子组件中的方法

（一） 父传子 

父组件：

父组件
<div class="edit-template">
	<edit-template :aTemplate="editItem"></edit-template>
</div> 

data(){
    editItem:'我是父组件数据',//利用props传给编辑页面数据
},

当然在这里你要引入子组件并注册
import EditTemplate from './edit-template.vue';

components:{
		EditTemplate
},

子组件： 

子组件  在组件里面接受传过来的数据

props:{
    aTemplate:{
        type:String,
        default:'',//如果没有传的话，默认值为空
        //require：true,//设置为true时为必传，不传会报错，require和default写一个即可
    }
 },
mounted(){
    console.info(this.aTemplate);
}

 

---

 （二）子组件向父组件传值

子组件:<childs></childs>

//子组件
<template>
    <button @click="sendMsg">点击传值</button>
</template>
data(){
    return{
        msg:'我是子组件数据',
    }
},
methods:{
    sendMsg(){
        this.$emit('sendToParent',msg);
    }
}

父组件：<parent></parent>

<template>
    <div>
        <childs @sendToParent="childsMsg"></childs>
    </div>
<template>
methods:{
    childsMsg(msg){
        console.info(msg);
    }
}

---

 （三） 父组件触发子组件的方法

子组件：base-info.vue

 methods:{
       /**
        * 保存前的校验
       */
     valid() {
         console.info('我是子组件中的方法')      
       }
}

父组件：

<div class="content">
      <button class="btn btn-md btn-theme" @click="save">保存</button>
      <!--基本信息-->
     <base-info ref="baseInfo"></base-info>          
</div>

<script>
    import BaseInfo from './security-group/base-info.vue';
    export default{
         components: {
            BaseInfo,
         },
methods:{
// 保存安全组信息
            save() {
                this.$refs.baseInfo.valid();
            },

    }
</script>

---

（四）非父子组件之间传值Bus

利用Bus传参的时候要新建一个bus.js文件

//bus.js
import Vue from 'vue';
export default new Vue();

子代组件：tree-menu.vue

//tree-menu.vue，子代组件
<button @click="childsVue">点击我</button>
<script>
    //在使用bus的文件中正确引用bus的文件地址
    import Bus from './bus.js';

    methods:{
        childsVue(){
            Bus.$emit('getChildsVue',{data:'我是childs的信息'});
        },
    }
</script>

 tree-menu组件的直属父级----left-sidebar.vue

<template>
    <div>
        <tree-menu></tree-menu>
    </div>
</template>

 父代Vue组件material-list.vue

<template>
    <div>
        <left-sidebar></left-siadebar>
    </div>
</template>

<script>
    //同样适用bus的话要先引入bus.js
    import Bus from '../../XXX/bus.js'; // Bus是在树形组件中传参时使用
    //我们在created中打印一下，mounted中引用也是可以的
    created() {
            Bus.$on('getChildsVue',childsData => {
                console.info(childsData,'接受子代组件的传值');
            });
        },
</script>

打印结果：