VUE中的父子元件通訊

阿新 • • 發佈：2022-05-07

VUE專案中的父子元件之間的傳值。
首先說一下父子元件就是在一個vue檔案中引入另一個vue檔案，被引入vue檔案就是子元件，引入vue檔案的vue檔案就是父元件。而在父元件中是不能直接呼叫子元件中的變數值的。下面詳細說一下，父子元件之間怎麼傳值。

先說一下父元件引入子元件的方法。

1、路由配置：使用children屬性實現路由巢狀，巢狀的元件關係就是父子元件關係

{
      path: '/father',
      name: 'father',
      component: father,
      children: [
        {
          path: 'son',
          name: 'son',
          component: son
        }
      ] }

2、元件傳值-父元件向子元件傳值
第一步：父元件在引用子元件時，通過屬性繫結（v-bind：）的形式，把需要傳遞給子元件的資料，傳遞到子元件內部，供子元件使用

父元件：father.vue

<template>
  <div>
    <h1>父元件</h1>
    <router-view v-bind:fData="data1" :fMessage="data2"></router-view>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      data1: '父元件資料data1',
      data2: '父元件資料data2',
    };
  }
}
</script>

第二步：把父元件傳遞過來的資料，在 props陣列中定義一下

元件中的所有props 中的資料，都是通過父元件傳遞給子元件的

props 中的資料都是隻讀的，無法重新賦值

第三步：在該子元件中使用props陣列中定義好的資料

子元件：son.vue

<template>
  <div>
    <h1>子元件</h1>
    <p>下面是父元件傳過來的資料</p>
    <p>第一個資料：{{fData}}</p>
    <p>第二個資料：{{fMessage}}</p>
  </div>
</template>
  
<script>
export default {
  props: ['fData', 'fMessage'],
  data () {
    return {
  
    };
  }
}
</script>

　　3、元件傳值-父元件把方法傳遞給子元件
第一步：父元件向子元件傳遞方法，使用事件繫結機制 v-on，自定義一個事件屬性，傳遞給子元件

<template>
  <div>
    <h1>父元件</h1>
    <router-view @show="showFather"></router-view>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
 
    };
  },
  methods: {
    showFather (a, b) {
      console.log('觸發了父元件的方法' + '======' + a + '======' + b);
    }
  }
}
</script>

第二步：在子元件中定義一個方法，在方法中，利用 $emit 觸發父元件傳遞過來的，掛載在當前例項上的事件，還可以傳遞引數

第三步：在子元件中呼叫定義的那個方法，就可以觸發父元件傳遞過來的方法了

子元件：son.vue

<template>
  <div>
    <h1>子元件</h1>
    <Button type="primary" @click="sonClick">觸發父元件方法</Button>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
 
    };
  },
  methods: {
    sonClick () {
      this.$emit('show', 111, 222);
    }
  }
}
</script>

4、元件傳值-子元件通過事件呼叫向父元件傳值
在子元件中，利用 $emit 觸發父元件傳遞過來的方法的時候，可以將子元件的資料當做引數傳遞給父元件

父元件：father.vue

<template>
  <div>
    <h1>父元件</h1>
    <router-view @show="showFather"></router-view>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      fromSon1: '',
      fromSon2: ''
    };
  },
  methods: {
    showFather (a, b) {
      this.fromSon1 = a;
      this.fromSon2 = b;
      console.log('觸發了父元件的方法' + '======' + a + '======' + b);
    }
  }
}
</script>

　　子元件：son.vue

<template>
  <div>
    <h1>子元件</h1>
    <Button type="primary" @click="sonClick">觸發父元件方法</Button>
  </div>
</template>
 
<script>
export default {
  props: ['fData', 'fMessage'],
  data () {
    return {
      sonMessage: '子元件資料sonMessage',
      sonData: '子元件資料sonData'
    };
  },
  methods: {
    sonClick () {
      this.$emit('show', this.sonMessage, this.sonData);
    }
  }
}
</script>

　　5、父子元件之間相互傳值
父元件：father.vue

<template>
  <div>
    <h1>父元件</h1>
    <Button type="primary" @click="getData">獲取資料</Button>
    <router-view v-bind:fData="data1" :fMessage="data2" @show="showFather"></router-view>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      data1: '父元件資料data1',
      data2: '父元件資料data2',
      fromSon1: '',
      fromSon2: ''
    };
  },
  methods: {
    showFather (a, b) {
      this.fromSon1 = a;
      this.fromSon2 = b;
      console.log('觸發了父元件的方法' + '======' + a + '======' + b);
    },
    getData () {
      console.log(this.fromSon1);
      console.log(this.fromSon2);
    }
  }
}
</script>

　　子元件：son.vue

<template>
  <div>
    <h1>子元件</h1>
    <p>下面是父元件傳過來的資料</p>
    <p>第一個資料：{{fData}}</p>
    <p>第二個資料：{{fMessage}}</p>
    <Button type="primary" @click="sonClick">觸發父元件方法</Button>
  </div>
</template>
 
<script>
export default {
  props: ['fData', 'fMessage'],
  data () {
    return {
      sonMessage: '子元件資料sonMessage',
      sonData: '子元件資料sonData'
    };
  },
  methods: {
    sonClick () {
      this.$emit('show', this.sonMessage, this.sonData);
    }
  }
}
</script>