vue如何实现兄弟组件间值传递

vuex是状态管理仓库,可实现组件间数据共享,但vuex适合大型项目应用,用于小项目过于繁琐。那么vue如何实现兄弟组件数据共享呢?
可借助父子组件间值传递方法,实现原理是:子传父,父传子
这里我们用例子来简单介绍下:

子组件传值给父组件
子组件通过触发父组件事件传值给父组件,子组件child1.vue代码:

<template>
    <div>
        <h3>子组件child1,把值传递给父组件</h3>
        <p><button @click="postData">点击传值给父元素</button></p>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                message : '子组件1的data'
            }
        },
        methods:{
            postData: function(){
                this.$emit("parentEvent",this.message)
            }
        }
    }
</script>

父组件传值给子组件:

父组件通过props传值给子组件,子组件child2.vue代码:

<template>
    <div>
        <h3>子组件child2,通过父组件获取子组件child1的值</h3>
        <p>{{message}}</p>
    </div>
</template>
<script>
    export default{
        props: ['message'],
        data(){
            return{}
        },
        methods:{

        }
    }
</script>

父组件代码:

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <h1>父页面</h1>
    <child1 @parentEvent="getData"></child1>
    <child2 :message="msg"></child2>
  </div>
</template>

<script>
import child1 from './child1'
import child2 from './child2' 
export default {
  name: 'app',
  components: {
    child1,
    child2
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
    getData:function(data){
      this.msg = data; 
    }
  }
}
</script>

猜你喜欢

转载自blog.csdn.net/yihanzhi/article/details/79569937
今日推荐