vue 组件之间的传值

vue父组件给子组件传值

父组件给导入的子组件绑定一个数据:title是父组件的数据

<template>
   <div id="home">
       父组件
       <v-header :title="title"></v-header>
   </div>
</template>
<script>
import Header from './Header.vue';
   export  default{
       data(){
           return{
               msg:"我是一个home组件",
               title:"我是父组件的数据"
           }
       },components:{
           'v-header':Header
       }
   }
</script>
<style lang="css" scoped>
</style>

2 子组件获取数据. props:['title'] 即可获得子组件数据

<template>
    <div id="header">
        <h2>我是子组件-----{{title}}</h2>
    </div>
</template>
<script>
    export  default{
        data(){
            return{
                msg:"我是一个home组件"
            }
        },methods:{

        },props:['title']
    }
</script>
 <style lang="css" scoped>
</style>

同样，在子组件中也可以调用父组件的方法；在父组件中创建一个方法，然后传给子组件；

<template>
    <div id="home">
        父组件
        <v-header :run="run"></v-header>
    </div>
</template>
<script>
import Header from './Header.vue';
    export  default{
        data(){
        },components:{
            'v-header':Header
        },methods:{
            run(){
                alert("我是父组件的方法");
            }
        }
    }
</script>

在子组件中获取并且调用；

<template>
    <div id="header">
        <h2>我是子组件</h2>
        <button @click="run()">子组件执行父组件的run方法</button>
    </div>
</template>
<script>
    export  default{
        data(){
        },props:['title','run']
    }
</script>

vue父组件主动获取子组件数据
将子组件看成父组件dom中的一部分，所以可以使用ref来获取
在调用子组件时设置ref

<v-header ref="header"></v-header>

在父组件需要获取子组件数据或方法的地方获取

//获取子组件数据
this.$refs.header.msg
//调用子组件方法
this.$refs.header.childRun();

vue子组件主动获取父组件数据

this.$parent.父组件方法
this.$parent.父组件数据

非父子组件传值

新建一个js文件，然后引入vue，实例化vue，然后暴露这个实例

import Vue from 'vue';
var VueEvent = new Vue();
export default VueEvent;

在要广播和需要接收数据的两个地方引入刚才定义的实例

import VueEvent from '../model/VueEvent.js';

3.通过emit广播数据

VueEvent.$emit('key' , data);

4.在接收数据的地方通过on接收数据

VueEvent.$on('key');

最后编辑于：2018.08.28 18:20:47