Vue3 父子组件传值 之 props/emits

父传子：props

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

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

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

• 第二步：定义父组件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

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

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

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

• 第二步：定义子组件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}
  }
}