Vue2_组件

组件传值（通信）的方式

1、父传子（三种）:

一：单项绑定，子组件props接收值。注意：子组件不能直接修改父组件的数据

<template>
  <!-- 父组件 -->
  <div>
    FatherView父组件
    <SonView :str="str"></SonView>
  </div>
</template>
<script>
import SonView from '@/components/SonView.vue'
export default {
  name: 'FatherView',
  components: {SonView},
  data() {
    return {
      str: '父组件数据'
    }
  },
}
</script>

<template>
  <!--子组件-->
  <div>
    SonView子组件-->获取父组件的值{{ str }}
  </div>
</template>
<script>
export default {
  name: 'Son',
  props: {
    str: {
      type: String,
      default: ''
    }
  }
}
</script>

二：this.$parent直接获取父组件的值。注意：子组件可以修改父组件的数据

<template>
  <!-- 父组件 -->
  <div>
    FatherView父组件
    <SonView></SonView>
  </div>
</template>
<script>
import SonView from '@/components/SonView.vue'
export default {
  name: 'FatherView',
  components: {SonView},
  data() {
    return {
      str: '父组件数据'
    }
  },
}
</script>

<template>
  <!--子组件-->
  <div>
    SonView子组件-->获取的父组件的值：{{str}}
  </div>
</template>
<script>
export default {
  name: 'Son',
  data() {
    return {
      str: ''
    }
  },
  created() {
    this.str = this.$parent.str
  }
}
</script>

三：provide/inject 依赖注入（父组件可以直接向某个后代组件传值，不用一级一级的传递）

<template>
  <!-- 父组件 -->
  <div>
    FatherView父组件
    <SonView></SonView>
  </div>
</template>
<script>
import SonView from '@/components/SonView.vue'
export default {
  name: 'FatherView',
  components: {SonView},
  // 依赖注入
  provide(){
    return{
      str: '父组件数据'
    }
  }
}
</script>

<template>
  <!--子组件-->
  <div>
    SonView子组件
    <GrandSon></GrandSon>
  </div>
</template>
<script>
import GrandSon from "@/components/GrandSon";
export default {
  name: 'Son',
  components: {GrandSon},
}
</script>

<template>
  <!-- 孙组件-->
  <div>
    GrandSon孙组件-->获取父组件的值：{{ str }}
  </div>
</template>
<script>
export default {
  name: "GrandSon",
  inject: ['str']
}
</script>

2、子传父（三种）

一：子组件自定义事件：this.$emit()

<template>
  <!-- 父组件 -->
  <div>
    FatherView父组件-->获取子组件数据，{{ str }}
    <SonView @change="getSonData"></SonView>
  </div>
</template>
<script>
import SonView from '@/components/SonView.vue'
export default {
  name: 'FatherView',
  components: {SonView},
  data() {
    return {
      str: ''
    }
  },
  methods: {
    getSonData(val) {
      this.str = val
    }
  }
}
</script>

<template>
  <!--子组件-->
  <div>
    SonView子组件
    <button @click="sendSonData()">子传父数据</button>
  </div>
</template>
<script>
export default {
  name: 'Son',
  data() {
    return {
      str: '子组件数据'
    }
  },
  methods:{
    sendSonData(){
      this.$emit('change',this.str)
    }
  }
}
</script>

二：父组件this.$children[0]直接获取子组件数据

<template>
  <!-- 父组件 -->
  <div>
    FatherView父组件-->获取子组件数据：{{ str }}
    <SonView></SonView>
  </div>
</template>
<script>
import SonView from '@/components/SonView.vue'
export default {
  name: 'FatherView',
  components: {SonView},
  data() {
    return {
      str: ''
    }
  },
  mounted(){
      this.str = this.$children[0].str
  }
}
</script>

<template>
  <!--子组件-->
  <div>
    SonView子组件
  </div>
</template>
<script>
export default {
  name: 'Son',
  data() {
    return {
      str: '子组件数据'
    }
  },
}
</script>

三：父组件this.$refs()直接获取子组件数据

<template>
  <!-- 父组件 -->
  <div>
    FatherView父组件-->获取子组件数据：{{ str }}
    <SonView ref="son"></SonView>
  </div>
</template>
<script>
import SonView from '@/components/SonView.vue'
export default {
  name: 'FatherView',
  components: {SonView},
  data() {
    return {
      str: ''
    }
  },
  mounted(){
      this.str = this.$refs.son.str
  }
}
</script>

<template>
  <!--子组件-->
  <div>
    SonView子组件
  </div>
</template>
<script>
export default {
  name: 'Son',
  data() {
    return {
      str: '子组件数据'
    }
  },
}
</script>

3、兄弟通信(bus.js传值)

引用兄弟组件

<template>
  <!-- 父组件-->
  <div>
    <BrotherView1></BrotherView1>
    <BrotherView2></BrotherView2>
  </div>
</template>
<script>
import BrotherView1 from "@/components/BrotherView1";
import BrotherView2 from "@/components/BrotherView2";
export default {
  components: {BrotherView1,BrotherView2},
}
</script>

新建bus.js

import Vue from "vue";
export default new Vue();

<template>
  <!-- 兄弟组件1-->
  <div>
    兄弟组件1-->自己的的数据：{{str}}
    <button @click="sendBrotherData()">给兄弟组件2传值</button>
  </div>
</template>

<script>
import bus from '@/utils/bus.js'
export default {
  data() {
    return {
      str: '兄弟组件1的数据'
    }
  },
  methods:{
    sendBrotherData(){
      bus.$emit('change',this.str)
    },
  }
}
</script>

<template>
  <!-- 兄弟组件2-->
  <div>
    兄弟组件2-->兄弟组件1的数据：{{ str }}
  </div>
</template>

<script>
import bus from '@/utils/bus.js'

export default {
  data() {
    return {
      str: ''
    }
  },
  created(val) {
    bus.$on('change', val => {
      this.str = val
    })
  }
}
</script>