vue中父子组件相互传值以及组件嵌套传值

a组件

<template>
  <div>
    父组件
    <p>{{ info }}</p>
    <forms
      :msg="date"
      :cdata="cdata"
      @sonData="receiveData"
      ref="child"
      :sonDatas.sync="sonData"
      @cData="cData"
    >
     <!-- @cData="cData" 通过自定义事件获取c组件中的数据，但是b组件应用c组件是需要添加 v-bind="$attrs" v-on="$listeners"-->
     <!-- @子组件传过来的自定义事件明="receiveData"   需要点击按钮传值-->
    <!-- :子组件的自定义事件名.sync="sonData"  不需要点击按钮传值，借助计算属性实现父子组件数据的双向绑定-->
    </forms>
    <button @click="parentss">点击按钮获取子组件中的数据和方法</button>
    <!-- <p>=============这是从点击按钮从子组件传过来的数据===============</p>
    <p>{{sonData.content1}}</p>
    <p>{{sonData.content2}}</p>
     <p>=============这是从点击按钮从子组件传过来的数据===============</p> -->
    <p>=============这是不用点击按钮从子组件传过来的数据===============</p>
    <p>{{ sonData.content1 }}</p>
    <p>{{ sonData.content2 }}</p>
    <p>==============这是不用点击按钮从子组件传过来的数据===============</p>
    <!-- 直接获取c组件中的数据 -->
    <p style="color:red">{{cmsg}}</p>
  </div>
</template>
<script>
import forms from "@/components/form.vue";
export default {
  components: { forms },
  data() {
    return {
      info: "父组件",
      date: "这是父组件传给子组件的值",
      sonData: {},
      cmsg:"",
      cdata:"这是a组件传给c组件的值"
    };
  },
  methods: {
    receiveData(el) {
      this.sonData = el;
    },
    cData(el){

        this.cmsg=el
    },
    parentss() {
      // this.$refs.headerChild.属性
      // this.$refs.headerChild.方法
      console.log(this.$refs.child);
    }
  }
};
</script>
<style scoped></style>

b组件

<template>
  <div>
    子组件
    <p>{{ message }}</p>
    <p>{{msg}}</p>
    
    <!-- <form >
      <input type="text" v-model="formData.content1" placeholder="请输入">
      <input type="text" v-model="formData.content2" placeholder="请输入">
      <button @click.prevent="setData">点击给父组件传值</button>
    </form> -->
     <form >
      <input type="text" v-model="formData.content1" placeholder="请输入">
      <input type="text" v-model="formData.content2" placeholder="请输入">
    </form>
    <cc v-bind="$attrs" v-on="$listeners" ></cc>
  </div>
</template>
<script>
import cc from '../components/C.vue'
export default {
  name: "forms",
  components:{
    cc
  },
  props:{
        msg:String
  },
  data() {
    return {
      message: "这是子组件的数据",
      formData:{
        content1:"",
        content2:""
      }
    }
  },
   watch: {
    formData:{
     handler(val){
          // console.log(val)
          // this.$emit('update:自定义事件名',值)
          this.$emit('update:sonDatas',val)
     },
     deep:true  //修改了这个queryData中的任何一个属性，都会执行handler这个方法
    }
  },
  methods: {
    // 通过自定义事件，子组件向父组件传值
    //  this.$emit(事件名, 值)
    setData(){
        this.$emit('sonData', this.formData)
    }
  }
}
</script>
<style scoped></style>

在b组件中引用臣组件的时候需要加上

v-bind=“$attrs"v-on="$listeners”

这样才可以用props直接传值给c组件和通过自定义时间直接传值给a组件

c组件

<template>
  <div>
    <p>
      {{ cmsg }}
    </p>
    这是从a组件传过来的数据
    <p>{{cdata}}</p>
    这是从a组件传过来的数据
  </div>
</template>
<script>
export default {
  props:{
    cdata:String
  },
  data() {
    return {
      cmsg: "我是子组件中子组件的数据"
    };
  },
  created(){
    this.$emit("cData",this.cmsg)
  }
};
</script>
<style lang="scss" scoped>
div {
  p {
    background-color: red
  }
}
</style>