元件之間是有聯絡的，避免不了元件之間要互相傳值，父給子使用v-bind繫結自定義屬性和使用props來接受

子給父使用@自定義事件='函式' this.$emit('自定義事件','要傳送的內容')，子元件通過$emit來觸發父元件的函式來實現
但是兩個同級元件之間這麼互相傳值

<div id='app'>
 <children1></children1>
 <children2></children2>
</div>
<script>
  var children1 = {};
  var children2 = {};
 var vm = new Vue({
  el:'#app',components:{
   children1,children2
  }
 })
</script>

現在要將children1元件中的資料傳給children2元件

主要使用到vue例項中的$on()和$emit()

 <div id='app'>
  <children1></children1>
  <children2></children2>
 </div>
 <script>
     var Event = new Vue({}); // 建立一個vue例項用來作為傳值的媒介
   var children1 = {
   template:`
    <div>
     <button @click='send'>點我給children2元件傳送資料</button>
    </div>
   `,data(){
    return {
     msg:'我是要fyLYhTaYI
 
給children2傳送的資料'
    }
   },methods:{
    send(){ 
     Event.$emit('go',this.msg) 
    }
   }
  };
   var children2 = {
   template:`
    <div>
     <h2>從children1元件接收到的值：{{msg1}}</h2>  
    </div>
   `,data(){
    return{
     msg1:''
    }
   },created(){
    Event.$on('go',(v) => { // 必須使用箭頭函式因為this
     this.msg1 = v;
    })
   }
  };
  var vm = new Vue({
   el:'#app',components:{
    children1,chfyLYhTaYI
 
ildren2
   }
  })
</script>

chilren1元件要傳送資料使用的是Event.$emit()
chilren2元件要接收資料使用Eevent.$on()

到此這篇關於Vue兩個同級元件傳值實現的文章就介紹到fyLYhTaYI這了,更多相關Vue 同級元件傳值內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！