👨🧑父子组件传值

👨父传子🧑

👨父传子🧑父组件传值

• 在父组件的setup函数里面定义响应式数据
• 子组件接受父组件数据 使用props接受

 //  父组件
<template>
  <div>
   == 父组件 {{msg}}
   <hr>
   <Son :count="count" @btnSon='btnSon' ></Son>
  </div>
</template>

<script>
import {ref } from 'vue'
import Son from './components/Son.vue'
export default {
  name: 'DemoApp',
 components:{
   Son
 },
 // 父组件的数据传递给子组件
 setup(){
    const count = ref(1111)
    const  msg = ref("")
    const btnSon =(s)=>{
      // console.log(s);
     msg.value= s
    }
    return {msg,count,btnSon}
 }
};
</script>

🧑子传父👨

触发自定义事件的时候emit来自setup(props,{emit}){ //emit就是触发事件函数 }

<template>
  <div>
    == 子组件{{count}}
    <button @click="btn">按钮</button>
  </div>
</template>

<script>
import {ref} from 'vue'
export default {
  name: 'DemoSon',
  // 子组件接收父组件数据用props
  props: {
    count:{
      type:Number
    }
  },
  // props 父组件数据
  // emit触发自定义事件的函数
  setup(props,{emit}){
    let  son = ref("===我是传过来的子组件")
    const btn =()=>{
     emit('btnSon',son)
    }
  return {son,btn}
 }
};
</script>

使用依赖注入(provide和inject传值)

父组件使用provide 提供数据 子组件，后代组件 使用inject 共享父组件数据

👨父组件

<template>
  <div>
    provide === app
    <hr>
    <Son></Son>
  </div>
</template>

<script>
import {provide} from "vue"
import Son from './components/Son.vue'
export default {
  name: 'DemoApp',
 components:{
   Son
 },
 setup(){
  //  provide(键,值)
  provide('app','我是根组件')
 }
 
};
</script>

🧑子组件

<template>
  <div>
     provide === son {{p}}
  </div>
</template>

<script>
import {inject} from "vue"
export default {
  name: 'DemoSon',
  setup(){
    // inject里面的值 需要个provide 键一样
    const p = inject('app')
    return {p}
  }
};
</script>

vue-model 双向传值

组件支持v-model的时候，父传子:modelValue 子传父 @update:modelValue

👨父组件

<template>
  <div>
    哈哈哈哈 =={{val}}
    <hr/>
    <SModel v-model="val"></SModel>
  </div>
</template>

<script>
import SModel from './components/Smodel.vue'
export default {
  name: 'DemoApp',
  components:{SModel},
  data(){
    return {
      val:'app  v-model'
    }
  }
};
</script>

🧑子组件

<template>
  <div>
    smodel组件 -=={{modelValue}}
    <button @click="btn">按钮</button>
  </div>
</template>

<script>
export default {
  name: 'DemoSmodel',
  props:{
    modelValue:{
      type:String
    }
  },
  setup(props,{emit}){
   const btn = ()=>{
     console.log(emit,555);
     emit('update:modelValue',props.modelValue+5)
   }
   return {btn}
  }
};
</script>

😊 💪 每天进步一点点 每天积累一点点 💪