vue3 传统 组件之间通信

准备工作

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

• 修改App.vue代码如下：

import Father from "./Father.vue";
import Son from "./Son.vue";

export default {
  name: 'App',
  components: {
    Son
  }
}

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

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

let app = createApp(App)
app.mount('#app')

父传子：props 步骤：

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

具体实现

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

  父组件
  
  


import Son from "./Son.vue";
import {ref} from 'vue'
export default {
  name: "Father",
  components:{
    Son
  },
  setup(){
    const msg = ref("来自父组件的信息")
    return {msg}
  }
}

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

  子组件
  直接使用：{{ xinXi }}
  处理之后使用：{{xx}}


export default {
  name: "Son",
  //子组件使用props接收父组件的数据
  props: {
    xinXi: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    //子组件通过setup()的参数获取父组件的数据
    console.log(props.xinXi)
    const xx = props.xinXi+":::::"
    return {xx}
  }
}

子传父:emits 步聚：

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

具体实现

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

  子组件
  发送数据给父组件



export default {
  name: "Son",
  //emit：触发自定义事件
  setup(props, {emit}) {
    const send_msg = () => {
      emit('msg_son', "来自儿子的数据")
    }
    return {send_msg}
  }
}

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

  父组件
  {{ msg }}
  
     



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}
  }
}