vue3 父子组件间通信

day1-11 父子组件间通信(父传子)

vue3 父子组件间通信_第1张图片
vue3 父子组件间通信_第2张图片
vue3 父子组件间通信_第3张图片
父组件:

<script setup>

import SonCom from './components/son-com.vue'
import {ref} from "vue";
const totall = ref(100)

setTimeout(()=>{
  totall.value = 300
},3000)
</script>

<template>

  <div>
<!-- 父组件传入一个属性值  传递静态数据和动态数据 -->
    <SonCom  message="父组件得值张三丰"  :totall="totall"/>
  </div>

</template>

<style scoped>
</style>

子组件:

<script setup>
const  props = defineProps({
  message: String,
  totall: Number,
})

console.log('在这里使用props', props)
</script>

<template>

  <div class="son">
    <h3>子组件</h3>
    <h3>父组件得值: {{message}}</h3>
    <h3>父组件得totall: {{totall}}</h3>
  </div>

</template>

<style scoped>
</style>

day1-12 父子组件间通信(子传父)
vue3 父子组件间通信_第4张图片
vue3 父子组件间通信_第5张图片总结:

父传子
1.父传子的过程中通过什么方式接收
props?defineProps({ 属性名: 类型})
2.setup语法糖中如何使用父组件传过来的数据?
const props = defineProps({属性名: 类型})

const  props = defineProps({
  message: String,
  totall: Number,
})

子传父
1.子传父的过程中通过什么方式得到emit方法?
defineEmits(事件名称])

const emit = defineEmits(['函数名'])
emit('函数名字', '需要传递得参数')

day1-13 模板引用
vue3 父子组件间通信_第6张图片

vue3 父子组件间通信_第7张图片
defineExpose()
默认情况下在

你可能感兴趣的:(javascript,前端,vue.js)