vue3语法中setup函数的props和context参数怎么用

vue3语法中setup函数的props和context参数怎么运用，下面web建站小编给大家简单介绍一下具体实现代码！

父组件

<template>
  <div>
    父组件 
  </div>
  <no-cont :mytitle="msg"
    othertitle="其它的标题"
    @sonclick="sonclick">
  </no-cont>
</template>
 
<script>
import NoCont from "../components/NoCont.vue"
export default {
  setup () {
    let msg={
      title:"父组件给子给子组件的数据"
    }
    function sonclick(msss:string){
      console.log(msss)
    }
    return {msg,sonclick}
  },
  components:{
    NoCont
  }
}
</script>

子组件

<template>
  <div @click="sonHander">
    我是子组件中的数据
  </div>
</template>
 
<script>
import { defineComponent,setup } from "vue";
export default defineComponent({
  name: "NoCont",
  setup(props,context){
  console.log("props==>",props.mytitle);//输出的值是 undefined
  function sonHander(){
    context.emit("sonclick","子组件传递给父组件")
  }
  return {sonHander}
  }
});

</script>

盘点vue3的各种生命周期

如何在Vue3中使用watch监控一个对象的属性值

Vue3怎么运用pinia状态管理工具

Vue3中文官网介绍

vue3语法如何利用mitt实现兄弟组件传值

标签： context参数, props参数, setup函数, vue3语法

上面是“vue3语法中setup函数的props和context参数怎么用”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_4581.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！