04组件之间的传递数据

# 组件之间的传递

# 父传子

父组件

// src/App.vue
<template>
  <test :msg="msg"></test>
</template>

<script>
import { reactive, toRefs } from "vue";
import test from "./components/test.vue"; //引入子组件

export default {
  components: {
    test, //注册
  },
  setup() {
    const result = reactive({
      msg: "我是父组件传给子组件——>",
    });

    return {
      ...toRefs(result),
    };
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

子组件

// src/components/test.vue
<template>
  <div>{{ msg }}我是子组件</div>
</template>

<script>
import { toRefs } from "vue";
export default {
  props: {
    msg: String,
  },

  setup(props) {
    const { msg } = toRefs(props);
    return {
      msg,
    };
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 案例

看官网说明 (opens new window)

// toRefs：解构
const { msg } = toRefs(props); //传递过程发生响应-会变
const { msg } = props; //传递过程会不会响应-不会变

1
2
3

父组件

<template>
  <test :msg="msg"></test>
  <button @click="change">按钮</button>
</template>

<script>
import { reactive, ref, toRefs } from "vue";
import test from "./components/test.vue";   //引入子组件

export default {
  components: {
    test,
  },
  setup() {
    const result = reactive({
      msg: "我是父组件传给子组件——>",
    });

    const change = () => {
      result.msg = "父组件的数据已经变化的——>";
      console.log(result.msg);
    };

    return {
      ...toRefs(result),
      change,
    };
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

子组件

<template>
  <div>{{ msg }}我是子组件</div>
</template>

<script>
import { toRefs } from "vue";
export default {
  props: {
    msg: String,
  },

  setup(props) {
    const { msg } = toRefs(props); //传递过程发生响应-会变
    // const { msg } = props; //传递过程会不会响应-不会变
    return {
      msg,
    };
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 子传父

父组件

// src/App.vue
<template>
  <test @childevent="fn($event)"></test>
</template>

<script>
import { reactive, ref, toRefs } from "vue";
import test from "./components/test.vue";   //引入子组件

export default {
  components: {
    test,
  },
  setup() {
    const fn = (e) => {
      console.log(e);
    };

    return {
      fn,
    };
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

子组件

// src/components/test.vue
<template>
  <div>
    我是子组件
    <button @click="handler">按钮</button>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  props: {
    msg: String,
  },

  setup(props, ctx) {
    const result = reactive({
      msg: "子组件的数据传给>——>父组件",
    });
    const handler = () => {
      ctx.emit("childevent", result.msg);
    };
    return {
      result,
      handler,
    };
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 子传父校验

父组件跟上面一致

子组件

<template>
  <div>
    我是子组件
    <button @click="handler">按钮</button>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  props: {
    msg: String,
  },
  //   emits: ["childevent"], //第一种方法
  emits: {
    childevent: (payload) => {//第二种方法
      if (typeof payload === "string") {
        return true;
      } else {
        console.log("报错");
        return false;
      }
    },
  },
  setup(props, ctx) {
    const result = reactive({
      //   msg: "子组件的数据传给>——>父组件", //是正确了
      msg: 123,//报错了
    });
    const handler = () => {
      ctx.emit("childevent", result.msg);
    };
    return {
      result,
      handler,
    };
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

编辑

上次更新: 2023/08/06, 00:38:41

← 03toRefs的解构 05订阅发布模式→