vue3 传统 组件之间通信

准备工作

利用vite创建项目，然后清空src，只保留App.vue和main.ts两个文件：

• 修改App.vue代码如下：

<template>
</template>
<script>
import Father from "./Father.vue";
import Son from "./Son.vue";

export default {
  name: 'App',
  components: {
    Son
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

• 修改main.ts，设置默认显示Father.vue:

import {createApp} from 'vue'
import App from './Father.vue'

let app = createApp(App)
app.mount('#app')
1
2
3
4
5

父传子：props

步骤：

1、 父组件中引入子组件，并通过自定义属性绑定要传给子组件的数据
2、 子组件中可以通过以下两种方式获取来自父组件的数据：
a) props
b) setup()的第一个参数props获取父组件传递过来的数据

具体实现

• 第一步：定义父组件Father.vue：

<template>
  <h2>父组件</h2>
  <hr>
  <Son :xinXi="msg"></Son>
</template>
<script>
import Son from "./Son.vue";
import {ref} from 'vue'
export default {
  name: "Father",
  components:{
    Son
  },
  setup(){
    const msg = ref("来自父组件的信息")
    return {msg}
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

• 第二步：定义子组件Son.vue：

<template>
  <h2>子组件</h2>
  <p>直接使用：{{ xinXi }}</p>
  <p>处理之后使用：{{xx}}</p>
</template>
<script>
export default {
  name: "Son",
  //子组件使用props接收父组件的数据
  props: {
    xinXi: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    //子组件通过setup()的参数获取父组件的数据
    console.log(props.xinXi)
    const xx = props.xinXi+":::::"
    return {xx}
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

子传父:emits

步聚：

1、 子组件中通过setup的第二个参数context中的emits为数据绑定一个事件名称
2、 父组件中通过为子组件指定1中的自定义事件获取数据

具体实现

• 第一步：定义子组件Son.vue，子组件中单击按钮事件中emit自定义事件到父组件

<template>
  <h2>子组件</h2>
  <button @click="send_msg">发送数据给父组件</button>
</template>

<script>
export default {
  name: "Son",
  //emit：触发自定义事件
  setup(props, {emit}) {
    const send_msg = () => {
      emit('msg_son', "来自儿子的数据")
    }
    return {send_msg}
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• 第二步：定义父组件Father.vue，父组件接收来自父组件的数据并显示

<template>
  <h2>父组件</h2>
  {{ msg }}
  <hr>
  <Son @msg_son="son_msg"></Son>   <!-- 来自Son的自定义事件-->
</template>

<script>
import Son from "./Son.vue";
import {ref} from 'vue'
export default {
  name: "Father",
  components: {
    Son
  },
  setup() {
    const msg = ref("")
    const son_msg = (msg2) => {
      console.log(msg2)
      msg.value = msg2
    }
    return {msg, son_msg}
  }
}
</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