Vue3组件间的传参总结

💥prps

✨方式一

父组件

<template>
    <div>
        我是父组件
        <!-- 传递给子组件 -->
        <ChildrenVue :msg='msg' />
    </div>
</template>
<script>
import ChildrenVue from '../components/Children.vue';
import { ref } from 'vue'
export default {
    //注册子组件
    components: {
        ChildrenVue
    },
    setup() {
        //向子组件传递的参数
        const msg = ref('哈喽哈喽')
        return {
            msg
        }
    }
}
</script>
  

子组件

<template>
    <div>
        我是子组件
        <!-- 使用参数 -->
        <h1> {{msg}}</h1>
    </div>
</template>
<script>
export default {
    //接收参数
    props: ['msg'],
    setup(props) {
        //获取父组件传递的参数
        const msg = props.msg
        console.log(props.msg);
        return {
            msg
        }
    }
}
</script>

✨方式二

父组件

<template>
    <div>
        我是父组件
        <!-- 传递给子组件 -->
        <ChildrenVue :msg='msg' />
    </div>
</template>
<script setup>
import ChildrenVue from '../components/Children.vue';
import { ref } from 'vue'
// 传递参数
const msg = ref('哈喽哈喽')
</script>

子组件

<template>
    <div>
        我是子组件
        <!-- 使用参数 -->
        <h1> {{msg}}</h1>
    </div>
</template>
<script setup>
const props = defineProps({
    // 写法一
    // msg: String
    //写法二
    msg: {
        type: String,
        default: ''
    }
})
console.log(props.msg);
</script>

💥emit

方式一

父组件

<template>
    <div>
        我是父组件
        <ChildrenVue @myClick='onMyClick' />
    </div>
</template>
<script setup>
import ChildrenVue from '../components/Children.vue';
//父组件定义自定义事件onMyClick
//监听子组件的自定义事件myClick
const onMyClick = (msg) => {
    //获取参数
    console.log(msg);
}
</script>

子组件

<template>
    <div>
        我是子组件
        <button @click="handleClick">按钮</button>
    </div>
</template>
<script setup>
import { defineEmits } from 'vue'
//获取emit
const emit = defineEmits()
//定义点击事件handleClick
//定义自定义事件myClick
//传递信息
const handleClick = () => {
    emit('myClick', '我是子组件给父组件的')
}
</script>

方式二

父组件

<template>
    <div>
        我是父组件
        <ChildrenVue @myClick='onMyClick' />
    </div>
</template>
<script>
//引入子组件
import ChildrenVue from '../components/Children.vue';
export default {
    //注册
    components: {
        ChildrenVue
    },
    setup() {
        //定义自定事件触发子组件，获取信息
        const onMyClick = (msg) => {
            console.log(msg);
        }
        return {
            onMyClick
        }
    }
}
</script>

子组件

<template>
    <div>
        我是子组件
        <button @click="handleClick">按钮</button>
    </div>
</template>
<script>
export default {
    setup(props, context) {
        const handleClick = () => {
            context.emit('myClick', '我是子组件给父组件的')
        }
        return {
            handleClick
        }
    }
}
</script>

💥ref

方式一

父组件

<template>
    <div>
        我是父组件
        <!-- 定义ref 获取子组件的属性和方法 -->
        <ChildrenVue ref='childrenRef' />
        <button @click="show">获取子组件的属性和方法</button>
    </div>
</template>
<script>
//引入子组件
import ChildrenVue from '../components/Children.vue';
import { ref } from 'vue'
export default {
    //注册
    components: {
        ChildrenVue
    },
    setup() {
        //声明子组件的ref
        const childrenRef = ref(null)
        const show = () => {
            //使用子组件的属性和方法
            //通过 ref.value.子组件的属性or方法
            console.log(childrenRef.value.title);
            childrenRef.value.toggle()
        }
        return {
            childrenRef,
            show
        }
    }
}
</script>

子组件

<template>
    <div>
        我是子组件
    </div>
</template>
<script>
export default {
    setup() {
        const title = '我是子组件的属性'
        const toggle = () => {
            console.log('我是子组件的方法');
        }
        return {
            title,
            toggle
        }
    }
}
</script>

方式二

父组件

<template>
    <div>
        我是父组件
        <!-- 定义ref 获取子组件的属性和方法 -->
        <ChildrenVue ref='childrenRef' />
        <button @click="show">获取子组件的属性和方法</button>
    </div>
</template>
<script setup>
//引入子组件
import ChildrenVue from '../components/Children.vue';
import { ref } from 'vue'
//声明子组件的ref
const childrenRef = ref(null)
const show = () => {
    //使用子组件的属性和方法
    //通过 ref.value.子组件的属性or方法
    console.log(childrenRef.value.title);
    childrenRef.value.toggle()
}
</script>

子组件

<template>
    <div>
        我是子组件
    </div>
</template>
<script setup>
const title = '我是子组件的属性'
const toggle = () => {
    console.log('我是子组件的方法');
}
defineExpose({
    // 将想要暴露的属性和方法名称
    title, toggle
})
</script>

💥attrs

方式一

父组件

<template>
    <div>
        我是父组件
        <ChildrenVue :msg='msg' />
    </div>
</template>
<script setup>
//引入子组件
import ChildrenVue from '../components/Children.vue';
import { ref } from 'vue'
const msg = ref('我是父组件传递的信息')
</script>

子组件

<template>
  <div>
    我是子组件
    {{ attrs.msg }}
  </div>
</template>
<script setup>
import { useAttrs } from "vue";
const attrs = useAttrs();
console.log(attrs.msg);
</script>

方式二

父组件

<template>
  <div>
    我是父组件
    <ChildrenVue :msg1="msg1" :name="msg2" @click="toggle"/>
  </div>
</template>
<script>
import ChildrenVue from "../components/Children.vue";
import { ref } from "vue";
export default {
  components: { ChildrenVue },
  setup() {
    const msg1 = ref("我是父组件传递的信息1");
    const msg2 = ref("我是父组件传递的信息2");
    //传递的方法
    const toggle = () => {
      console.log("hhhhh");
    };
    return {
      msg1,
      msg2,
      toggle,
    };
  },
};
</script>

子组件

<template>
  <div>
    我是子组件
    {{ name }}
  </div>
</template>
<script>
export default {
  props: { name: String },
  setup(props, context) {
    //props传递的参数    name:'我是父组件传递的信息2'
    console.log(props);
    //attrs传递的参数    msg1: '我是父组件传递的信息1'
    console.log({ ...context.attrs });
  }
};
</script>

💥inject

父组件

<script setup>
   import { provide } from "vue"
   provide("name", "hello")
</script>

子组件

<script setup>
   import { inject } from "vue"
   const name = inject("name")
   console.log(name) // hello
</script>