Vue组件通信之父传子与子传父深入探究

<template> 
  <input type="text" placeholder="请输入你喜欢的明星">
  <List :list="list" ></List>
</template>
<script>
import {reactive } from 'vue'
import List from '../views/List.vue' //引入子组件
export default {
    name:'hello',
//手动挂载子组件
    components:{List},
    setup(props,context){   
        let list=reactive(['蔡徐坤','张云龙','秦霄贤','烧饼'])
//return返回
        return{
           list
        }
    }
}
</script>

<template>
    <div>
    <ul>
    <li v-for="(item,index ) in list" :key="index">{{item}}</li>
  </ul>
    </div>
</template>
<script>
export default{
    props:{
        list:{
            type:Array,
        }
    },
    setup(){
        
    }
}
</script>

<template>
    <div>
    <ul>
    <li v-for="(item,index ) in list" :key="index" @click="select(item)">{{item}}</li>
  </ul>
    </div>
</template>
<script>
export default{
//父传子接受子组件中的数据，渲染到页面
    props:{
        list:{
            type:Array,
        }
    },
    setup(props,{emit}){
//点击触发select方法
        const select=(item)=>{
            console.log(item);
            // 会把数据传递给父组件中
            emit('sel',item)
        }
        return {select}
    }
}
</script>

<template>
  <input type="text" placeholder="请输入你喜欢的明星">
  <List :list="list" @sel="sel" ></List>
</template>
<script>
import { reactive } from 'vue'
import List from '../views/List.vue'
export default {
    name:'hello',
    components:{List},
    setup(){
        let list=reactive(['蔡徐坤','张云龙','秦霄贤','烧饼'])      
        const sel=(data)=>{
            console.log(data);
        }
        return{
           list,sel
        }
    }
}
</script>

<template>
  <div>
    <h3>{{name}}</h3>
    <Son></Son>
  </div>
</template>
<script>
import Son from '../views/Son.vue'
import { provide,reactive } from 'vue'
export default {
    components:{
        Son
    },
    setup(){
        let name=reactive('张三')
        provide('name',name)
        return {
            name
        }
    }
}
</script>

<template>
  <div>
    <Son1></Son1>
  </div>
</template>
<script>
import Son1 from '../views/Son1.vue'
import {inject} from 'vue'
export default {
    components:{
        Son1
    },
    setup(){
        let name=inject('name')
        console.log(name);
        return {name}
    }
}
</script>

<template>
  <div>
    <h3>{{names}}</h3>
  </div>
</template>
<script>
import { inject } from 'vue'
export default {
    setup(){
        let names=inject('name')
        return {names}
    }
}
</script>

<template>
  <div>
    <input type="text" class="inp" v-model="username"/> 
    <Son v-model:username="username"></Son>
  </div>
</template>
<script>
import Son from '../views/Son.vue'
import { reactive } from 'vue'
export default {
    components:{
        Son
    },
    setup(){
        let username=reactive('')
        return {
           username
        }
    }
}
</script>

<template>
    <div>
        <input type="text"  :value="username" @input="(e) => $emit('update:username', e.target.value)" />
    </div>
</template>
<script>
import { inject } from 'vue'
export default {
    props: ["username"],
    setup() {
    }
}
</script>