• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

浅谈Vue3 父子传值

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

父传子:

1、 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据"

在这里为了大家区分我将父组件中的数据定义为 : fatherData  ,

子组件需要接收的数据定义为: sonData 。

// 父组件
<template>
  <div class="about">
    {{fatherData}}
    <!-- 父传子 -->
    <!-- 1、 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据" -->
    <children :sonData="fatherData"></children>
  </div>
</template>
 
<script>
import children from "@/components/children"
import { defineComponent,reactive,toRefs } from "vue";
export default defineComponent({
  components:{
    children,
  },
name:"about",
setup(){
  const state = reactive({
    fatherData:"hello"
  })
  return {
    ...toRefs(state)
  }
}
 
})
</script>

2、子组件依旧通过 props 来接收并且在模版中使用

那么大多数情况下都会去通过父组件传递到子组件中的数据,根据这个数据去做一些特定的功能或者请求数据等等。

在 setup 钩子中第一个参数 props 就可以访问到父组件传递的数据,那么在函数中也是通过:  props.父组件传递数据的名称   来操作该数据。

setup函数接收props作为其第一个参数,props对象是响应式的(单向的父—>子),watchEffect或watch会观察和响应props的更新。不要对props对象进行解构,那样会失去响应性。在开发过程中,props对象对用户空间代码时不可变的,用户尝试修改props时会触发警告。

// 子组件
<template>
  <div class="children">
    <!-- 3、在子组件模版中使用 -->
    {{sonData}}
  </div>
</template>
<script>
export default {
name:"Children",
// 2、子组件通过 props 来接收
  props:["sonData"],
  setup(props){
    function childrenbut(){
      // props.sonData  可以访问到父组件传递的数据
      console.log(props.sonData);
    }
    return {
      childrenbut
    }
  }
}
</script>

子传父:

1、子组件触发事件通过 setup 的第二个参数 context.emit 来实现子传父 

context 上下文对象。

// 子组件
<template>
  <div class="children">
    {{sonData}}
    <!-- 1、触发事件 -->
    <button @click="childrenbut">子组件按钮</button>
  </div>
</template>
<script>
export default {
name:"Children",
  setup(props,context){
    function childrenbut(){
      console.log(context);
      // 2、通过context.emit 实现子传父
      // 第一个参数为 方法名,第二个参数为 需要传递的数据
      context.emit("change",'world')
    }
    return {
      childrenbut,
    }
  }
}
</script>

context 也可以使用结构的形式这样写

// 子组件
<script>
export default {
name:"Children",
  // 通过结构 之后直接写 emit {emit}
  setup(props,{emit}){
    function childrenbut(){
      // 省去 context.emit
      emit("change",'world')
    }
    return {
      childrenbut,
    }
  }
}
</script>

总结

在 vue3 中无论是父传子还是子传父其实与 vue2 中都相差无几,

思想大多一样,不一样的是 vue3 需要通过调用各种各样的钩子来实现传参


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
uniapp实现日期时间选择器发布时间:2022-02-05
下一篇:
vue 折叠展示多行文本组件的实现代码发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap