一.props实现通信
父组件向子组件传值，子组件的props选项能够接收来自父组件数据。props仅仅只能接收，props是单向绑定的，即只能父组件向子组件传递，不能反向。而传递的方式也分为两种：静态传值和动态传值
1.静态传值
示例：
父组件是App.vue ,子组件是Head.vue
App.vue 父组件:
<template>
<div id="app">
<v-head msg='标题'></v-head>
</div>
</template>
<script>
import header from "@/components/Head";//引入组件
import {
defineAsyncComponent } from "vue"; //异步局部挂载
export default {
name: "App",
components: {
"v-head": header,
},
},
</script>
<style>
</style>
Head.vue 子组件
<template>
<div id="headinfo">
头部组件
<br>
{
{
msg}}
</div>
</template>
<script>
export default {
name:'headinfo',
props:{
msg:String
},
}
</script>
<style>
</style>
结果：
2.动态传值
示例：同样的两个文件
App.vue 父组件
<template>
<div id="app">
<v-head :msg="msg" ></v-head> //动态传值
</div>
</template>
<script>
import header from "@/components/Head";
import {
defineAsyncComponent } from "vue";
export default {
name: "App",
components: {
"v-head": header,
},
data(){
return {
msg:'动态传值',
}
},
};
</script>
<style>
</style>
Head.vue 子组件
template>
<div id="headinfo">
头部组件
<br>
{
{
msg}}
</div>
</template>
<script>
export default {
name:'headinfo',
props:{
msg:String
},
}
</script>
<style>
</style>
结果：
二.通过$ref 实现通信
如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，在父组件通过$ref可能获取到在子组件里定义的属性和方法。
如果 ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过 $ref可能获取到该DOM 的属性集合，轻松访问到DOM元素
$ref也是父组件向子组件进行传值
示例：同样的两个文件
App.vue 父组件
<template>
<div id="app">
<v-head ref="headlist" :msg="msg" @myevent="sendmsg"></v-head>
<button id="btninfo" ref="btn">按钮</button>
</div>
</template>
<script>
import header from "@/components/Head";
import {
defineAsyncComponent } from "vue";
export default {
name: "App",
components: {
"v-head": header,
},
data(){
return {
msg:'动态传值',
}
},
mounted() {
//在父组件当中如何获取子组件 this.$refs 获取虚拟的dom元素 vNode
//给需要获取的标签 设置ref属性自定义名称
console.log(this.$refs.headlist);
//获取到子组件 可以直接使用子组件中的数据和方法
console.log(document.getElementById("btninfo"));
console.log(this.$refs.btn);
},
</script>
<style>
</style>
Head.vue 子组件
<template>
<div id="headinfo">
头部组件
<br>
{
{
msg}}
</div>
</template>
<script>
export default {
name:'headinfo',
props:{
msg:String
},
}
</script>
<style>
</style>
结果：
prop和$ref之间的区别：
- prop 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。
- $ref
着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。
三.$emit实现通信
props, $ref都是父组件向子组件传值，而 $emit 是子组件向父组件进行传值
App.vue 父组件
<template>
<div id="app">
<v-head ref="headlist" @myevent="sendmsg"></v-head>//@myevent 事件 函数sendmsg
</div>
</template>
<script>
import header from "@/components/Head";
import {
defineAsyncComponent } from "vue";
export default {
name: "App",
components: {
"v-head": header,
},
methods: {
sendmsg(args) {
console.log(args);
},
checkData() {
console.log("执行我的父容器");
},
},
};
</script>
<style>
</style>
Head.vue 子组件
<template>
<div id="headinfo">
头部组件
<br>
</div>
</template>
<script>
export default {
name:'headinfo',
mounted() {
//触发自定义事件
this.$emit("myevent","数据"); //子向父传值
//直接可以通过下面这个获取父组件
console.log(this.$parent);//Proxy
//可以直接使用父组件中的方法和数据
let parent=this.$parent;
parent.checkData();
},
}
</script>
<style>
</style>
结果：
