场景描述
在项目开发中。我们可能会使用父组件调用子组件中的方法
也有可能子组件中调用父组件中的方法
下面我们来看一看组件之间方法的调用
父组件页面
<template> <div> <list-com ref="listRef"></list-com> <button @click="changeValue" >改变值</button> </div> </template> <script> import listCom from "@/components/list-com.vue" import { ref } from '@vue/reactivity' export default { components:{ listCom }, setup () { let listRef=ref() function changeValue(){ // 需要注意let listRef=ref() 不能够写在这个函数体内， // 否者listRef 将会找不到，因为有函数作用域 listRef.value.fatherMess([{name:'杨洋'}]) } return {changeValue,listRef} } } </script>
子组件页面
<template> <div> <h2>我是子组件</h2> 儿子接受到的数据:{{ list.arr}} </div> </template> <script> import { reactive } from '@vue/reactivity'; export default { setup () { let list=reactive({ arr:[] }) function fatherMess(mess){ console.log('父组件给子组件的值',mess ); list.arr=mess } // 虽然页面上没有使用这个函数， // 但是也要抛出去，否者父组件会报错 fatherMess is not a function return {fatherMess,list} } } </script>
出现 Uncaught TypeError: listRef.value.fatherMess is not a function 如何解决
出现这样的错误，是因为子组件中的事件 fatherMess函数。
并没有抛出出去哈
解决办法 子组件中 return {fatherMess}
子组件调用父组件中的方法
<template> <div> <h2>我是子组件</h2> <button @click="getHander" >获取值</button> </div> </template> <script> import { reactive } from '@vue/reactivity'; export default { setup (props,{attrs,slots,emit}) { function getHander(){ // 不能够在使用原来的 this.$partent.xxx()这种方式了 emit('myclick','给父组件的值' ) } return {getHander} } } </script>
父组件
<template> <div> <list-com @myclick="myclick"></list-com> </div> </template> <script> import listCom from "@/components/list-com.vue" export default { components:{ listCom }, setup () { function myclick(mess){ console.log(mess); } return {myclick} } } </script>
