记录：Vue组件通信方式(包含Vue3和Vue2)

已于 2024-03-07 17:19:02 修改
阅读量275 收藏 3
点赞数 3
分类专栏： Vue 文章标签： vue
于 2023-06-23 13:34:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_71403100/article/details/131349804
版权

一、前言

组件通信是指在不同组件之间传递数据、交互和协作的过程。通过合理的组件通信方式，我们能够实现组件之间的解耦和灵活的功能组合，提高代码的可维护性和复用性。

整理下Vue组件通信方式，包含Vue3和Vue2

二、Vue3组件通信方式

2.1、props

场景：父向子传递数据

实现步骤：通过defineProps获取父组件传递的数据

父组件内👇：

<template>
  <div class="box">
    <!-- ⭐props:可以实现父子组件通信,props数据是只读的！！！ -->
    <h1>props:我是父组件曹操</h1>
    <hr />
    <Child info="我是曹操" :money="money"></Child>
  </div>
</template>

<script setup lang="ts">
import Child from './Child.vue'
import { ref } from 'vue'
let money = ref(1000)
</script>

子组件内👇：

<template>
  <div class="son">
    <h1>我是子组件:曹植</h1>
    <p>{{ info }}</p>
    <p>{{ money }}</p>
  </div>
</template>

<script setup lang="ts">
//需要使用到defineProps方法去接受父组件传递过来的数据
//defineProps是Vue3提供方法,不需要引入直接使用
//⭐注：以下两种形式，选择一种即可
//⭐第一种形式：使用字符串数组来声明
let props = defineProps(['info', 'money'])
//⭐第二种形式：使用对象来声明
let props = defineProps({
  info: {
    type: String, //接受的数据类型
    default: '默认参数' //接受默认数据
  },
  money: {
    type: Number,
    default: 0
  }
})
</script>

2.2、自定义事件

场景：子向父传递数据

实现步骤：

①第一步：使用了defineEmits方法，不需要引入直接使用，传递一个数组，数组元素即为将来组件需要触发的自定义事件类型，此方执行会返回一个$emit方法用于触发自定义事件。

②第二步：当点击按钮的时候，事件回调内部调用$emit方法去触发自定义事件,第一个参数为触发事件类型，第二个、三个、N个参数即为传递给父组件的数据。

子组件内👇：

<template>
  <div class="son">
    <p>我是子组件</p>
    <button @click="handler">向父传递参数</button>
    <button @click="$emit('click', 'AK47', 'J20')">点击我触发自定义事件click</button>
  </div>
</template>

<script setup lang="ts">
//利用defineEmits方法返回函数触发自定义事件
//defineEmits方法不需要引入直接使用
//⭐正常组件标签书写@click应该为原生DOM事件,但是如果子组件内部通过defineEmits定义就变为自定义事件了
let $emit = defineEmits(['share', 'click'])
//按钮点击回调
let handler = () => {
  //⭐第一个参数:事件类型 第二个|三个|N参数即为注入数据
  $emit('share', 123, 'hahaha')
}
</script>

父组件内👇：

<template>
  <div>
    <h1>自定义事件</h1>
    <hr />
    <!-- ⭐绑定自定义事件share和click:实现子组件给父组件传递数据 -->
    <Event1 @share="handler" @click="handler1"></Event1>
  </div>
</template>
<script setup lang="ts">
import Event1 from './Event1.vue'
//自定义share--事件回调
let handler = (num, params1) => {
  console.log('##', num, params1)
}
//自定义click--事件回调
let handler1 = (params1, params2) => {
  console.log('@@', params1, params2)
}
</script>

2.3、全局事件总线

场景：实现任意组件通信

实现步骤：因vue3组合式API写法没有this，可以使用插件mitt实现

mitt官网地址：https://www.npmjs.com/package/mitt

mitt使用步骤：
第一步：引入mitt
npm install --save mitt
第二步：在src文件夹下新建bus文件夹，在bus文件夹内新建index.ts文件
⭐引入mitt插件:mitt一个方法,方法执行会返回bus对象
import mitt from 'mitt'
const $bus = mitt()
export default $bus

需求：父组件中包含Child1和Child2两个子组件，要求Child2将数据传给Child1
数据发送方：Child2👇：

<template>
  <div class="child2">
    <h2>我是子组件2:曹丕</h2>
    <button @click="handler">点击我给兄弟送一台法拉利</button>
  </div>
</template>

<script setup lang="ts">
//⭐引入$bus对象
import $bus from '../../bus'
//⭐点击按钮回调
const handler = () => {
  $bus.emit('car', { car: '法拉利' })
}
</script>

数据接收方：Child1

<template>
  <div class="child1">
    <h3>我是子组件1:曹植</h3>
  </div>
</template>
<script setup lang="ts">
import $bus from '../../bus'
//组合式API函数
import { onMounted } from 'vue'
//⭐组件挂载完毕的时候,当前组件绑定一个事件,接受将来兄弟组件传递的数据
onMounted(() => {
  //⭐第一个参数:即为事件类型  第二个参数:即为事件回调
  $bus.on('car', (car) => {
    console.log(car)
  })
})
</script>

2.4、v-model

场景：v-model指令是收集表单数据(数据双向绑定)，除此之外也可以实现父子组件数据同步

实现步骤：v-model是利用props[modelValue]与自定义事件[update:modelValue]实现的

⭐第一种：单个v-model实现数据同步
父组件内👇：

<template>
  <div>
    <h2>v-model:钱数{{ money }}</h2>
    <input type="text" v-model="money" />
    <hr />
     <!-- ⭐第一种：利用props[modelValue]与自定义事件[update:modelValue]实现 -->
    <Child :modelValue="money" @update:modelValue="handler"></Child>
    <!-- 
       ⭐第二种：v-model组件身上使用
       第一:相当有给子组件传递props[modelValue] = 10000
       第二:相当于给子组件绑定自定义事件update:modelValue
     -->
      <!-- 单个v-model实现数据同步 -->
     <Child v-model="money"></Child>
  </div>
</template>
<script setup lang="ts">
//⭐v-model指令:收集表单数据,数据双向绑定
//⭐v-model也可以实现组件之间的通信,实现父子组件数据同步的业务
//👉父亲给子组件数据 props
//👉子组件给父组件数据 自定义事件
import Child from './Child.vue'
import { ref } from 'vue'
let money = ref(1000)
//自定义事件回调
let handler = (a) => {
  money.value = a
}
</script>

子组件内👇：

<template>
  <div class="child">
    <h2>钱数：{{ modelValue }}</h2>
    <button @click="handler">父子组件数据同步</button>
  </div>
</template>

<script setup lang="ts">
//⭐接收props
let props = defineProps(['modelValue'])
let $emit = defineEmits(['update:modelValue'])
//⭐子组件内部按钮的点击回调
let handler = () => {
  //触发自定义事件
  $emit('update:modelValue', props.modelValue + 10)
}
</script>

⭐第二种：多个v-model实现数据同步
父组件内👇：

<template>
  <div>
    <h2>v-model:钱数{{ pageNo }}-{{ pageSize }}</h2>
    <hr />
    <!-- 多个v-model实现数据同步 -->
    <Child1 v-model:pageNo="pageNo" v-model:pageSize="pageSize"></Child1>
  </div>
</template>
<script setup lang="ts">
import Child1 from './Child1.vue'
import { ref } from 'vue'

let pageNo = ref(1)
let pageSize = ref(10)
</script>

子组件内👇：

<template>
  <div class="child2">
    <h3>同时绑定多个v-model</h3>
    <button @click="handler">pageNo-{{ pageNo }}</button>
    <button @click="handler1">pageSize-{{ pageSize }}</button>
  </div>
</template>
<script setup lang="ts">
let props = defineProps(['pageNo', 'pageSize'])
let $emit = defineEmits(['update:pageNo', 'update:pageSize'])
//pageNo事件回调函数
let handler = () => {
  $emit('update:pageNo', props.pageNo + 2)
}
//pageSize事件回调函数
let handler1 = () => {
  $emit('update:pageSize', props.pageSize + 4)
}
</script>

 2.5、useAttrs

场景：获取组件的属性与事件(包含:原生DOM事件或者自定义事件)，此函数功能类似于Vue2框架中$attrs属性与$listeners方法。

实现步骤：父组件中使用子组件，子组件内部可以通过useAttrs方法获取组件属性与事件，类似于props。

注意：如果defineProps接受了某一个属性，useAttrs方法返回的对象身上就没有相应属性与属性值。

父组件内👇：

<template>
  <div>
    <h1>useAttrs</h1>
    <el-button type="primary" size="small" :icon="Edit"></el-button>
    <!-- 自定义组件 -->
    <HintButton type="primary" size="small" :icon="Edit" title="编辑按钮" @click="handler" @xxx="handler"></HintButton>
  </div>
</template>

<script setup lang="ts">
//vue3框架提供一个方法useAttrs方法,它可以获取组件身上的属性与事件！！！
//图标组件
import { Check, Delete, Edit, Message, Search, Star } from '@element-plus/icons-vue'
import HintButton from './HintButton.vue'
//按钮点击的回调
const handler = () => {
  alert(12306)
}
</script>

子组件内👇：

<template>
  <div :title="title">
    <el-button :="$attrs"></el-button>
  </div>
</template>
<script setup lang="ts">
//引入useAttrs方法:获取组件标签身上属性与事件
import { useAttrs } from 'vue'
//此方法执行会返回一个对象
let $attrs = useAttrs()

//万一用props接受title
let props = defineProps(['title'])
//props与useAttrs方法都可以获取父组件传递过来的属性与属性值
//但是props接受了useAttrs方法就获取不到了
</script>

 2.6、ref与$parent

场景：
refs：父组件访问子组件
$parent：子组件访问父组件

第一种场景：refs--->父组件访问子组件

父组件内👇：

<template>
  <div class="box">
    <h1>我是父亲曹操:{{ money }}</h1>
    <button @click="handler">找我的儿子曹植借10元</button>
    <hr />
    <Son ref="son"></Son>
  </div>
</template>

<script setup lang="ts">
//ref:可以获取真实的DOM节点,可以获取到子组件实例VC
import { ref } from 'vue'
//引入子组件
import Son from './Son.vue'
//父组件钱数
let money = ref(1000000000)
//获取子组件的实例
let son = ref();
//父组件内部按钮点击回调
let handler = () => {
  //父亲钱数减去10
  money.value += 10
  //儿子钱数减去10
  son.value.money -= 10
}
</script>

子组件内👇：

<template>
  <div class="son">
    <h3>我是子组件:曹植{{ money }}</h3>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
let money = ref(1000)
//组件内部数据对外关闭的，别人不能访问
//⭐如果想让外部访问需要通过defineExpose方法对外暴露
defineExpose({ money })
</script>

第二种场景：$parent-->子组件访问父组件

父组件内👇：

<template>
  <div class="box">
    <h1>我是父亲曹操:{{ money }}</h1>
    <Dau></Dau>
  </div>
</template>

<script setup lang="ts">
//⭐$parent:可以在子组件内部获取到父组件的实例
//引入子组件
import Dau from './Daughter.vue'
import { ref } from 'vue'
//父组件钱数
let money = ref(100000000)
//对外暴露
defineExpose({
  money
})
</script>

子组件内👇：

<template>
  <div class="dau">
    <h1>我是闺女曹杰{{ money }}</h1>
    <button @click="handler($parent)">点击我爸爸给我10000元</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
//闺女钱数
let money = ref(999999)
//⭐闺女按钮点击回调，需要有参数--> $parent
const handler = ($parent) => {
  money.value += 10000
  $parent.money -= 10000
}
</script>

2.7、provide与inject

场景：隔辈组件通信(爷爷与孙子数据数据传值)
组件之间：爷爷组件引入儿子组件，儿子组件引入孙子组件

祖辈组件(爷爷组件)👇：

<template>
  <div class="box">
    <h1>Provide与Inject{{ car }}</h1>
    <hr />
    <Child></Child>
  </div>
</template>

<script setup lang="ts">
import Child from './Child.vue'
//vue3提供provide(提供)与inject(注入),可以实现隔辈组件传递数据
import { ref, provide } from 'vue'
let car = ref('法拉利')
//祖先组件给后代组件提供数据
//两个参数:第一个参数就是提供的数据key
//第二个参数:祖先组件提供数据
provide('TOKEN', car)
</script>

孙辈组件(孙子组件)👇：

<template>
  <div class="child1">
    <h1>孙子组件</h1>
    <p>{{ car }}</p>
    <button @click="updateCar">更新数据</button>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue'
//注入祖先组件提供数据
//需要参数:即为祖先提供数据的key
let car = inject('TOKEN')
const updateCar = () => {
  car.value = '自行车'
}
</script>

2.8、插槽slot

场景：实现父子组件通信----->分别为默认插槽、具名插槽、作用域插槽。

场景一：默认插槽，它允许父组件将内容插入到子组件的特定位置

实现步骤：

①在子组件中使用 <slot></slot> 标签来表示默认插槽的位置

②父组件中嵌套在子组件标签之间的内容将会被渲染到默认插槽中。

如下Test为子组件,在父组件内部使用的时候，在双标签内部书写结构传递给子组件

子组件内👇：

<template>
  <div class="box">
    <h1>我是子组件默认插槽</h1>
    <!-- ⭐默认插槽 -->
    <slot></slot>
    <h1>我是子组件默认插槽</h1>
  </div>
</template>

<script setup lang="ts"></script>

父组件内👇：

<template>
  <div>
    <h1>slot</h1>
    <!-- ⭐在Test子标签内，书写结构传递给子组件 -->
    <Test>
      <p>端午安康</p>
    </Test>
  </div>
</template>

<script setup lang="ts">
import Test from './Test.vue'
</script>

场景二：具名插槽，允许父组件在子组件中定义多个插槽，并将内容分发给指定的插槽。

实现步骤：

①在子组件中使用 <slot></slot> 标签，并通过 name 属性指定插槽的名称

②父组件使用 <template v-slot:name> 或简写形式 #name 来将内容分发给对应的插槽。

 子组件内👇：

<template>
  <div class="box">
    <!-- 具名插槽 -->
    <h1>具名插槽Test</h1>
    <!-- ⭐子组件内留有2个插槽，分别有名字 -->
    <slot name="tom"></slot>
    <slot name="cat"></slot>
  </div>
</template>

<script setup lang="ts"></script>

父组件内👇：

<template>
  <div>
    <h1>slot</h1>
    <Test>
      <template v-slot:tom>
        <div>填充tom的结构</div>
      </template>
      <!-- ⭐v-slot指令可以简化为# -->
      <template #cat>
        <div>填充cat的结构</div>
      </template>
    </Test>
  </div>
</template>

<script setup lang="ts">
import Test from './Test.vue'
</script>

场景三：作用域插槽（也称为带数据的插槽）允许父组件向子组件传递数据，并在子组件中自定义渲染逻辑。

实现步骤：

①在子组件中使用 <slot></slot> 标签，将数据回传给父组件，子组件内部决定不了自身结构与外观(样式)

②父组件中，通过 <template v-slot="{$row}"> 来接收子组件传递的数据

父组件内👇：

<template>
  <div>
    <Test1 :todos="todos">
      <template v-slot="{ $row }">
        <!--⭐父组件决定子组件的结构与外观-->
        <p :style="{ color: $row.done ? 'green' : 'red' }">{{ $row.title }}</p>
      </template>
    </Test1>
  </div>
</template>

<script setup lang="ts">
import Test1 from './Test1.vue'
import { ref } from 'vue'
//父组件内部数据
let todos = ref([
  { id: 1, title: '吃饭', done: true },
  { id: 2, title: '睡觉', done: false },
  { id: 3, title: '打豆豆', done: true }
])
</script>

 子组件内👇：

<template>
  <div class="box">
    <h1>todo</h1>
    <ul>
      <!--组件内部遍历数组-->
      <li v-for="item in todos" :key="item.id">
        <!--⭐作用域插槽将数据回传给父组件-->
        <slot :$row="item"></slot>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
//接受父组件传递过来的数据
defineProps(['todos'])
</script>

2.9、Pinia

场景：Pinia是集中式管理状态容器,可以实现任意组件之间通信

核心概念：state、actions、getters，不再有mutations与modules

Pinia官网指引👉：Pinia 中文文档 

Pinia使用步骤

第一步：安装 Pinia
npm install pinia
第二步：创建仓库

①index.ts中创建大仓库

//创建大仓库
import {createPinia} from 'pinia'
//createPinia方法可以用于创建大仓库
let store = createPinia()
//对外暴露,安装仓库
export default store

②main.ts中引入仓库

// 引入实例化上下文的api方法createApp
import { createApp } from 'vue'
// 引入element ui
import ElementPlus from 'element-plus'
// 引入element ui的样式
import 'element-plus/dist/index.css'
// 引入App组件
import App from './App.vue'
// 引入路由器
import router from './router'
//引入仓库
import store from './store'
// 创建app
const app = createApp(App)
app.use(store)
app.use(router) // 注册路由器
app.use(ElementPlus) // 使用element-ui
// 挂载
app.mount('#app');

③在modules中定义小仓库

//定义info小仓库
import { defineStore } from "pinia";
//第一个仓库:小仓库名字  第二个参数:小仓库配置对象
//defineStore方法执行会返回一个函数,函数作用就是让组件可以获取到仓库数据
let useInfoStore = defineStore("info", {
    //存储数据，类似于data
    state: () => {
        return {
            count: 99,
            arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        }
    },
    //Actions 相当于组件中的 methods，定义方法，可以是异步的
    actions: {
        //添加方法
        updateNum(a: number, b: number) {
            this.count += a;
        }
    },
    //与计算属性一样，您可以组合多个 getter。 通过 this 访问任何其他 getter
    getters: {
        total() {
            let result:any = this.arr.reduce((prev: number, next: number) => {
                return prev + next;
            }, 0);
            return result;
        }
    }
});
//对外暴露方法
export default useInfoStore;
第三步：在需要使用的vue文件中调用Pinia
<template>
  <div class="child">
    <h1>{{ infoStore.count }}---{{ infoStore.total }}</h1>
    <button @click="updateCount">点击我修改仓库数据</button>
  </div>
</template>

<script setup lang="ts">
import useInfoStore from '../../store/modules/info'
//获取小仓库对象
let infoStore = useInfoStore()
console.log(infoStore)
//修改数据方法
const updateCount = () => {
  //仓库调用自身的方法去修改仓库的数据
  infoStore.updateNum(66, 77)
}
</script>

三、Vue2组件通信方式

3.1、props

场景 ： 父组件传递数据给子组件

备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

父组件内👇：

<template>
  <div>
    <Student name="zs" :age="18"></Student>
  </div>
</template>

<script>
import Student from '@/components/Student.vue'
  export default {
    name:'App',
    components:{
      Student
    }
  }
</script>

子组件内👇：

<template>
  <div>
    <h2>名字：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
  </div>
</template>

<script>
export default {
  name: 'Student',
  //第一种：简单声明接收，数组形式
  props:['name','age'],
  //第二种：接收的同时对数据进行类型限制
  props:{
    name:String,
    age:Number
  }
  //第三种：接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
  props:{
    name:{
      type:String,
      required:true
    },
    age:{
      type:Number,
      default:100  //默认值
    }
  }
}
</script>

3.2、自定义事件

场景： 子向父传递数据

使用：子组件通过$emit触发定义事件，$emit中可以携带两个参数(‘名字’，‘参数’)

父组件绑定监听器获取子数据传递过来的参数

子组件内👇： 

<template>
  <div>
    <button @click="sentName">点击把名字传给父组件App</button>
  </div>
</template>

<script>
export default {
name:'Student',
data() {
  return {
    name:'zs'
  }
},
methods:{
  sentName(){
    this.$emit('send',this.name)
  }
 }
}
</script>

父组件内👇：

<template>
  <div>
    <h2>接收到Student名字是：{{studentName}}</h2>
    <Student @send="getName"></Student>
  </div>
</template>

<script>
import Student from '@/components/Student.vue'
export default {
name:'App',
components:{
  Student,
},
data() {
    return {
      studentName:''
    }
  },
methods:{
  getName(name){
    console.log('APP接收到Student传递的名字',name);
    this.studentName = name
  }
 } 
}
</script>

3.3、全局事件总线

场景： 适用于任意组件间通信

$bus使用步骤：

第一步：在main.js里面安装全局事件总线
new Vue({
  render: h => h(App),
  beforeCreate(){
    //安装全局事件总线
    Vue.prototype.$bus = this
  }
}).$mount('#app')
第二步：使用事件总线

提供数据方---> this.$bus.$emit('xxxx',数据)

使用数据方--->this.$bus.$on('xxxx',接收的数据)

最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件

数据发送方👇 

<!-- Student组件--数据发送方 -->
<template>
  <div>
    <button @click="sendSchool">把名字传递给School</button>
  </div>
</template>

<script>
export default {
name:'Student',
data() {
  return {
    name:'zs'
  }
},
methods:{
  sendSchool(){
    //数据发送方
    this.$bus.$emit('share',this.name)
  }
 }
}
</script>

 数据接收方👇

<!-- School组件--数据接收方 -->
<template>
  <div></div>
</template>

<script>
export default {
name:'School',
mounted(){
  //数据接收方
  this.$bus.$on('share',(data)=>{
    console.log('接收Student传递的名字为',data);
  })
},
//解绑组件所用到的事件
beforeDestroy(){
  this.$bus.$off('share')
 }
}
</script>

3.4、v-model

场景：v-model指令是收集表单数据(数据双向绑定)，除此之外也可以实现父子组件数据同步

场景1：通过value与input事件实现v-model数据双向绑定功能

<template>
  <div>
    <div>{{ msg }}</div>
    <input type="text" :value="msg" @input="msg = $event.target.value" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      msg: 'hello'
    }
  }
}
</script>

场景2：通过v-model实现父子组件数据同步

父组件中引入子组件，通过v-model绑定子组件

<template>
  <div>
    <h2>{{ msg }}</h2>
    <welcome v-model="msg"></welcome>
  </div>
</template>

<script>
import welcome from './view/welcome.vue'
export default {
  name: 'App',
  components: { welcome },
  data() {
    return {
      msg:'hello'
    }
  }
}
</script>

 子组件中绑定value动态属性   @input给原生DOM绑定原生DOM事件

<template>
  <div>
    <input type="text" :value="value" @input="$emit('input', $event.target.value)" />
  </div>
</template>
<script>
export default {
  name: 'Welcome',
  props: ['value']
}
</script>

3.5、属性修饰符sync

场景：可实现父子组件数据同步

父组件中：  :money.sync，代表父组件给子组件传递props【money】，给当前子组件绑定一个自定义事件【update:money】

<template>
  <div>
    <h2>{{ msg }}</h2>
    <welcome :money.sync="money"></welcome>
  </div>
</template>

<script>
import welcome from './view/welcome.vue'
export default {
  name: 'App',
  components: { welcome },
  data() {
    return {
      money: 10000
    }
  }
}
</script>

 子组件内：使用原生事件绑定一个方法,方法内使用( this.$emit('update:money', this.money - 1000) )来触发 从而实现父子组件数据同步

<template>
  <div>
    <button @click="change">花钱</button>
    父亲还剩{{ money }}
  </div>
</template>
<script>
export default {
  name: 'Welcome',
  props: ['money'],
  methods: {
    change() {
      this.$emit('update:money', this.money - 1000)
    }
  }
}
</script>

3.6、ref

场景： 被用来给元素或子组件注册引用信息（id的替代者）

父组件在使用子组件的时候设置ref----<Student ref="xxx"></Student>，

获取通过：this.$refs.xxx  

<!-- 父组件App -->
<template>
  <div>
    <Student ref="std"></Student>
    <button @click="showStudent">展示Student姓名和年龄</button>
  </div>
</template>

<script>
import Student from '@/components/Student.vue'
export default {
name:'App',
data() {
  return {
  }
},
components:{
  Student,
},
methods:{
  showStudent(){
    console.log(this.$refs.std.name); //zs
    console.log(this.$refs.std.age ); //18
  }
 }
}
</script>

子组件内👇

<!-- 子组件Student -->
<script>
export default {
name:'Student',
data() {
  return {
    name:'zs',
    age:18
  }
 }
}
</script>

最后：👏👏😊😊😊👍👍 

奔跑的露西
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值