vue 组件组件通信方法

1、父组件props传值给子组件。

子组件中定义props字段，类型为Array（如需限制字段值类型，也可以定义为Object的形式）。如下例子，父组件挂载子组件helloWorld，在组件标签上给title赋值，子组件helloWorld定义了props属性，里面有一个值是title，这样子组件就可以使用父组件传递过来的值了。

父组件：home.vue

<template>
  <div>
    <aaaChildren>
      <template #default="scope">
        <h1>{{ scope.info.age }}</h1>
      </template>
      <template #text="scope">
        <h2>{{ scope.data }}</h2>
      </template>
    </aaaChildren>
  </div>
</template>

<script>
import aaaChildren from './children/index.vue'

export default {
  name:'aaa',
  components:{
    aaaChildren
  }
}
</script>

子组件：hello-world.vue

<template>
  <div class="hello">
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  name: "helloWorld",
  props:["title"] // 接收传递过来的值
}
</script>

（1.）props扩展属性
文档传送门

属性名	值	描述
type	javaScript数据类型	限制props的类型
default	默认值	props的默认值
required	Boolean	是否必须 true为必须
validator	回调函数 默认参数为props的值	对props的值做处理 返回值必须是Boolean

（2.）props扩展示例

<template>
  <div class="hello">
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  name: "helloWorld",
  props: {
    title: String, // 限制必须是字符串类型
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: (value) => {
        return value >= 0
      }
    },
    list: {
      type: Object,
      default: () => ({}) // 引用类型的默认值 必须用一个箭头函数返回
    }
  }
}
</script>

2、子组件$emit传值给父组件。

子组件传值给父组件，需要在子组件中触发一个事件，在事件中，调用$emit(‘父组件的方法名’, ‘传递的值’)，然后在父组件中，通过在子组件标签上自定义事件函数，接收传递过来的值。
父组件：home.vue

<template>
  <div>
    <hello-world @childEvent="parentEvent" />
  </div>
</template>

<script>
import helloWorld from "../components/hello-world.vue";

export default {
  name: "home",
  components: {
    helloWorld
  },
  data() {
    return {}
  },
  methods: {
    parentEvent(value) {
      // 子组件传递过来的值
      console.log(value)
    }
  }
}
</script>

子组件：hello-world.vue

<template>
  <div class="hello">
    <h1 @click="handle">{{ age }}</h1>
  </div>
</template>

<script>
export default {
  name: "helloWorld",
  data() {
    return {
      age:18
    }
  },
  methods: {
    handle(){
      this.age++
      this.$emit("childEvent", this.age)
    }
  }
}
</script>

（1.）$emit传递多个参数
在$emit的第一个参数后面添加，父组件按顺序接收。或者直接传递一个Object。

// 子组件
this.$emit("childEvent", this.age, 'xxx', 'xxxx')
// or
this.$emit("childEvent", { a: 1, b: 2 })

// 父组件
parentEvent(value1, value2) {
  console.log(value1)
  console.log(value2)
}

(2.)$emit触发时的同时，父组件也传递参数
父组件：home.vue

<template>
  <div>
    <hello-world @childEvent="parentEvent(arguments, '我是父组件要携带的参数')" />
  </div>
</template>

<script>
import helloWorld from "../components/hello-world.vue";

export default {
  name: "home",
  components: {
    helloWorld
  },
  data() {
    return {}
  },
  methods: {
    parentEvent(childParam, parentParam) {
      // 子组件传递过来的值，是个数组
      console.log(childParam)
      // 父组件传递的值
      console.log(parentParam)
    }
  }
}
</script>

子组件：hello-world.vue

<template>
  <div class="hello">
    <h1 @click="handle">{{ age }}</h1>
  </div>
</template>

<script>
export default {
  name: "helloWorld",
  data() {
    return {
      age:18
    }
  },
  methods: {
    handle(){
      this.age++
      this.$emit("childEvent", this.age, '第二个值')
    }
  }
}
</script>

3、祖先组件provide传递孙子组件inject接收。

允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。注意：provide 和 inject 绑定并不是可响应的，然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的
祖先组件：ancestor.vue

<template>
 <div id="ancestor">
  <Parent :keys="keys" />
 </div>
</template>

<script>
import Parent from '../../components/parent'

export default {
 name: 'ancestor',
 components: {
  Parent
 },
 provide() {
  return {
   obj: this.obj
  }
 },
 data() {
  return {
   title: 'ancestor',
   keys: 1998,
   obj: {
    set: 'hello provide'
   }
  }
 }
}
</script>

父组件：parent.vue

<template>
 <div id="parent">
  <div class="head_box">
   <Son :value="index" />
  </div>
 </div>
</template>

<script>
import Son from '../son'

export default {
 name: 'parent',
 components: {
  Title
 },
 data() {
  return {
   index: 'WoW'
  }
 }
}
</script>

子组件：son.vue

<template>
 <div id="son">
  <div class="title_box">
   <p>我是 {{ obj.set }}</p>
  </div>
 </div>
</template>

<script>
export default {
 name: 'son',
 inject: {
  obj: {
   from: 'Communication',
   default: {}
  }
 },
 data() {
  return {
   index: 1
  }
 }
}
</script>

4、父组件$refs获取子组件数据。

在子组件标签上写上ref属性，父组件通过this.r e f s . n a m e . 方法名或者 t h i s . refs.name.方法名或者this.refs.name.方法名或者this.refs.name.属性名的方式可以访问子组件的数据和方法
父组件：parent.vue

<template>
  <div>
    <Son :title="msg" ref="hello" />
    <button @click="parentEvent">我是父亲</button>
  </div>
</template>

<script>
import Son from "../components/son.vue";

export default {
  name: "parent",
  data() {
    return {
      msg: "搜索音乐",
    };
  },

  methods: {
    parentEvent() {
      this.$refs.hello.add();
      console.log(this.$refs.hello.age);
    },
  },
  components: {
    HelloWorld
  },
};
</script>

子组件：son.vue

<template>
  <div class="hello">
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: ["title"],
  data() {
    return {
      age:18
    }
  },
  methods: {
    add(){
      console.log("我是子组件")
    }
  }
}
</script>