VUE2.0组件之间的传值

来源：互联网发布：矩阵制组织结构的特点编辑：程序博客网时间：2024/06/05 09:42

Vue1.0组件间传递

　　使用$on()监听事件；
　　使用$emit()在它上面触发事件；
　　使用$dispatch()派发事件，事件沿着父链冒泡；
　　使用$broadcast()广播事件，事件向下传导给所有的后代

Vue2.0后$dispatch()，$broadcast()被弃用，见https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换

1.子组件向父组件的传值：

Child.vue

<template>  <div class="child">    <h1>子组件</h1>    <button v-on:click="childToParent">想父组件传值</button>  </div></template><script>  export default{    name: 'child',    data(){      return {}    },    methods: {      childToParent(){        this.$emit("childToParentMsg", "子组件向父组件传值");      }    }  }</script>parent.vue

<template>  <div class="parent">    <h1>父组件</h1>    <Child v-on:childToParentMsg="showChildToParentMsg" ></Child>  </div></template><script>  import Child from './child/Child.vue'  export default{      name:"parent",    data(){      return {      }    },    methods: {      showChildToParentMsg:function(data){        alert("父组件显示信息："+data)      }    },    components: {Child}  }</script>

2.父组件向子组件传值

parent.vue

<template>  <div class="parent">    <h1>父组件</h1>    <Child v-bind:parentToChild="parentMsg"></Child>  </div></template><script>  import Child from './child/Child.vue'  export default{     name:"parent",    data(){      return {        parentMsg:'父组件向子组件传值'      }    },    components: {Child}  }</script>

child.vue

<template>  <div class="child">    <h1>子组件</h1>    <span>子组件显示信息：{{parentToChild}}</span><br>  </div></template><script>  export default{    name: 'child',    data(){      return {}    },    props:["parentToChild"]  }</script>

3.采用eventBus.js传值---兄弟组件间的传值

eventBus.js

import Vue from 'Vue'

export default new Vue()

App.vue

<template>  <div id="app">    <secondChild></secondChild>    <firstChild></firstChild>  </div></template><script>import FirstChild from './components/FirstChild'import SecondChild from './components/SecondChild'export default {  name: 'app',  components: {    FirstChild,    SecondChild,  }}</script>

FirstChild.vue

<template>  <div class="firstChild">    <input type="text" placeholder="请输入文字" v-model="message">    <button @click="showMessage">向组件传值</button>    <br>    <span>{{message}}</span>  </div></template><script>  import bus from '../assets/eventBus';  export default{    name: 'firstChild',    data () {      return {        message: '你好'      }    },    methods: {      showMessage () {       alert(this.message)        bus.$emit('userDefinedEvent', this.message);//传值      }    }  }</script>

SecondChild.vue

<template>    <div id="SecondChild">        <h1>{{message}}</h1>    </div></template><script>    import bus from '../assets/eventBus';    export default{        name:'SecondChild',        data(){            return {                message: ''            }        },        mounted(){            var self = this;            bus.$on('userDefinedEvent',function(message){                self.message = message;//接值            });        }    }

阅读全文

0 0