vue3父子组件传值

1. 父传子

child.vue

<template>
    <div>父组件内容：{{info}}</div>
</template>

<script>

export default {
  name: 'home',
  components: {
  },
  props: {
    'info': String
  },
  computed: {
  },
  data() {
    return {
        
    }
  },
  mounted() {
    
  },
  methods: {
  },
}
</script>
  
  
<style scoped>
</style>

father.vue

<template>
    <child :info="info_"/>
</template>

<script >
import child from './views/child.vue';
export default {
  name: 'App',
  components: {
    child
  },
  data() {
    return {
      info_: "父组件数据",
    }
  },
  methods: {
  },
}
</script>
  
<style scoped>
</style>

2. 子传父

child.vue

<template>
</template>

<script>

export default {
  name: 'home',
  components: {
  },
  props: {
  },
  computed: {
  },
  data() {
    return {
        is_ok:false,  //本页面是否加载完成
    }
  },
  mounted() {
    this.is_ok = true
    this.father()
  },
  methods: {
    father(){
      this.$emit('child_',this.is_ok)
      console.log('child is_ok', this.is_ok)
    },
    }
}
</script>
  
  
<style scoped>
</style>

father.vue

<template>
    <child @child_="child_"/>
</template>

<script >
import child from './components/child.vue';
export default {
  name: 'App',
  components: {
    child
  },
  data() {
    return {
      child_ok: false,
    }
  },
  methods: {
    child_(val){
      console.log('子组件的数据', val)
      if(val == true){
        this.child_ok = true
      }
    },
  },
}
</script>
  
<style scoped>
</style>