网站首页 Vue 正文

vue3 父子组件间相互传值

作者：腾梦更新时间： 2024-03-02 Vue

  <pie-chart :pieData="post_data.pid" />

父组件只需在子组件上声明一个变量即可。 :代表变量，可以传变量;否则只能传常量

export default {
    props:['pieData'],
    setup(props,ctx) {
        const pie_data = props.pieData

子组件中需要在props中声明需要接收的变量名，setup中需要引用props，赋值时用props.变量名接收。return出去就可以用了

 <submit class="submit" @e_flag="get_e_flag" />
 
const e_flag = ref(false);
    const get_e_flag = (e) => {
      e_flag.value = e;
    };

父组件需要声明一个@方法get_e_flag接收子组件发送的值,在该方法中赋值给需要的变量

setup(props, ctx) {
    ……
    const spyder_go = () => {
        ctx.emit('e_flag',e_flag.value)

子组件中需要在setup中使用ctx，使用ctx.emit向父组件传值。该方法需要调用，比如点击或者onMounted

原文链接：https://blog.csdn.net/weixin_43815091/article/details/123231513