vue2组件之间传值方式，父子，子父，兄弟，v-model ,provide和inject,$parent和$children

1.父组件向子组件传值

//子组件中使用props进行数据接收
<template>
  <div class="hello">
    <span>{{msg}}</span>
  </div>
</template>
 
<script>
export default({
  props:{
    msg:String
  },
  data(){
    return{
    }
  }
});
</script>
 
<style scoped>
</style>

<script>
//父组件
<template>
  <div class="home">
    <HelloWorld :msg = title></HelloWorld>
  </div>
</template>
 
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default({
  components:{
    HelloWorld
  },
  data(){
    return{
      title:'父传子'
    }
  }
});
</script>

2.子传父事件传值

1.在子组件中使用v-on进行事件绑定，使用$emit发送数据（@click="handleClick(item.value)）this.$emit(‘handleClick’, val)
2.在父组件中自定义事件用于接收传过来的值，使用$on接收数据（@handleClick）

//父组件
  <TeamHead :active="$route.query.active" @handleClick="handleClick"></TeamHead>

<script>
import TeamHead from '@/components/teamHead'
export default {
  components: { TeamHead },
  data() {
    return{
     
    }
  },
  methods: {
    handleClick(val) {}
    }



//子组件
<template>
  <div class="container">
    <div class="list">
      <div v-for="(item, index) in list" :key="item.value" :class="[active == item.value || active == 0 ? 'content active' : 'content']">
        <div class="contentTemo" :class="[active == item.value || active == 0 ? 'contentTemo' : 'contentTemo1']">
          <div class="icon">
            <img :src="item.icon" />
          </div>
          <div class="right">
            <div class="title">
              <span>{{ index + 1 }}.</span> {{ item.text }}
            </div>
            <div class="button">
              <el-button type="text" size="default" @click="handleClick(item.value)"
                ><a class="buttonText">{{ item.buttonText }}</a></el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const list = [
  {
    icon: require('@/assets/images/icon_2.png'),
    text: '组建团队',
    buttonText: '去组建团队',
    value: '3',
  },
]
export default {
  name: 'myHome',
  props: {
    active: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return { 
      list,
    }
  },
  methods: {
    handleClick(val) {
      this.$emit('handleClick', val)
    },
  },
}
</script>

3.兄弟组件之间传值：EventBus

 1.首先在父组件进行组件挂载
 2.新建一个公共的js文件 bus.js  代码
  impourt vue form 'vue  
  export default  new  vue
  3.在需要传值的子组件中进行公共JS文件的引入 import bus  from '@/components/utils/bus.js'
  4.在传值的子组件中使用$emit进行传值  bas.$emit （‘’，this.cuanzhi）
在接收值的组件中使用$on进行接收（写在钩子函数中,mounted！！！)

4.provide和inject

1.父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量

//父组件
  <TeamHead></TeamHead>
  <script>
import TeamHead from '@/components/teamHead'
export default {
  components: { TeamHead },
  provide:{ content:'传给子组件的内容'}
  data() {
    return{
    }
  },
  methods: { 
    }
  </script>
  
  //子组件 
  //接收到的值
  <div>{{content}}</div>
    <script> 
export default { 
inject：['content']
  data() {
    return{
    }
  }
  </script>

5.v-model

//父组件
  <TeamHead v-model='str'></TeamHead>
  <script>
import TeamHead from '@/components/teamHead'
export default {
  components: { TeamHead }, 
  data() {
    return{
    str:'传递子组件的值'
    }
  },
 
  </script>
  
  //子组件 
  //接收到的值
  <div @click='changevalue'>子组件 接收到的值{{value}}</div>
    <script> 
export default { 
   props:{
   value:{
      type:String,
      defalt:''
   }
  },
 methods:{
	  changevalue(){
	  this.$emit （‘input’，改变v-model绑定的值）
	  }
  }
  </script>

6. $parent和$children

子组件通过$parent对父组件进行操作，父组件通过$children对子组件进行操作。

子组件调用父组件的方法 this.$parent.方法名()父组件调用子组件的方法this.$children.方法名()

//父组件
  <TeamHead v-model='str'></TeamHead>
  <script>
import TeamHead from '@/components/teamHead'
export default {
  components: { TeamHead }, 
  data() {
    return{
    str:'传递子组件的值'
    }
  },
 
  </script>
  
  //子组件 
  //接收到的值
  <div @click='changevalue'>子组件 接收到的值{{$parent.str}}</div>
    <script> 
export default { 
 methods:{
	  changevalue(){
	  this.$parent.str=改变的父组件值
	  }
  }
  </script>