VUE3父子组件通信

父组件向子组件传递数据

父组件代码

• 父组件传递msg，msg2两条数据

<template>
  <h2>App</h2>
  <p>msg: {{msg}}</p>
  <!-- 传递数据 -->
  <child :msg="msg" msg2="cba"/>
</template>

<script lang="ts">
import {
  reactive,
  ref,
} from 'vue'
import child from './child.vue'

export default {

  components: {
    child
  },

  setup () {
  	//定义msg属性
    const msg = ref('abc')
    return {
      msg,
      fn
    }
  }
}
</script>

子组件代码

<template>
  <div>
  	
  </div>
</template>

<script lang="ts">

import {
  ref,
  defineComponent
} from 'vue'

export default defineComponent({
  name: 'child',
  //接收msg数据
  props: ['msg'],
  
//第一个参数为父组件向子组件传递的对象，第二个参数content是一个对象包括父组件向子组件传递的属性(attrs)，子组件向父组件传递数据的emit函数，插槽对象(slots)
  setup (props, content}) {
  	console.log(props.msg)//msg数据
  	console.log(content.attrs.msg2)//msg2数据
  },
})
</script>

子组件向父组件传递数据

父组件代码

<template>
  <h2>App</h2>
  
  <child  @fn="fn" >
    
  </child>
</template>

<script lang="ts">
import {
  reactive,
  ref,
} from 'vue'
import child from './components/child.vue';

export default {

  components: {
    child
  },

  setup () {
    function fn (content: string) {
      console.log(content)
    }
    return {
      fn
    }
  }
}
</script>

子组件代码

<template>
  <div>
    <button @click="update">更新</button>
  </div>
</template>

<script lang="ts">

import {
  ref,
  defineComponent
} from 'vue'

export default defineComponent({
  name: 'child',
 
  //四个参数分别为：父组件向子组件传递的对象，父组件向子组件传递的属性,子组件向父组件传递数据,插槽数据
  setup (props, {attrs, emit, slots}) {
  
    function update () {
      // 分发自定义事件
      emit('fn', '++')
    }

    return {
      update,
    }
  },
})
</script>

slot（父组件灵活使用子组件）

父组件代码

<template>
  <child>
    <!-- slot插槽属性在vue3中被弃用 -->
    <!-- <p slot='header'>我是头部插入的组件</p>
    <p slot='bottom'>我是插入尾部的组件</p> -->
    
    <!-- 新版 -->
     <template v-slot:header>
      头头头
    </template>
    <template v-slot:bottom>
      魏薇伪
    </template>
  </child>
</template>

<script lang="ts">
import {
  reactive,
  ref,
} from 'vue'
import child from './components/child.vue';

export default {

  components: {
    child
  },

  setup () {
  
 
  }
}
</script>

子组件代码

<template>
  <div>
    <p>我是头部</p>
    <slot name='header'></slot>
    <p>我是尾部</p>
    <slot name='bottom'></slot>
  </div>
</template>

<script lang="ts">

import {
  ref,
  defineComponent
} from 'vue'

export default defineComponent({
  name: 'child',

  setup () {},
})
</script>

混合使用

• 父组件

<template>
  <p>father页面 -----------</p>
  <p> {{msg}}</p>
  <button @click="fn('--')" class='aa'>更新</button>

  <child :msg="msg" msg2="cba" @fn="fn" class='acs'>
    <!-- slot插槽属性在vue3中被弃用 -->
    <!-- <p slot='header'>我是头部插入的组件</p>
    <p slot='bottom'>我是插入尾部的组件</p> -->
    
    <!-- 新版 -->
     <template v-slot:header>
      头头头
    </template>
    <template v-slot:bottom>
      尾尾尾
    </template>
  </child>
</template>

<script lang="ts">
import {
  reactive,
  ref,
} from 'vue'
import child from './components/child.vue';

export default {

  components: {
    child
  },

  setup () {
    const msg = ref('abc')

    function fn (content: string) {
      msg.value += content
    }
    return {
      msg,
      fn
    }
  }
}
</script>

• 子组件

<template>
  <div>
    <p>child页面 -----------</p>
    <h3>{{n}}</h3>
    <h3>{{m}}</h3>

    <h3>{{msg}}</h3> 
    <h3>{{$attrs.msg2}}</h3>
    <p>我是头部</p>
    <slot name='header'></slot>
    <p>我是尾部</p>
    <slot name='bottom'></slot>
    <button @click="update">更新</button>
  </div>
</template>

<script lang="ts">

import {
  ref,
  defineComponent
} from 'vue'

export default defineComponent({
  name: 'child',
  props: ['msg'],//接收数据,不可省略
  setup (props, {attrs, emit, slots}) {
    console.log(props)
    const m = ref(2)
    const n = ref(3)

    //子组件触发父组件的方法，并传递数据
    function update () {
      m.value += 2
      n.value += 2
      // 分发自定义事件
      emit('fn', '++')
    }

    return {
      m,
      n,
      update,
    }
  },
})
</script>