Vue3组件间的传值案例

一.知识补充

如下整理了，Vue3传值过程中，props，emit，ref，attrs，inject在setup script 标签中和不在setup script 标签中的案例

1.setup

setup 方法接受两个参数 setup(props, context)

props 是父组件传给组件的数据

context(上下文) 中包含了一些常用属性：

  • attrs 表示由上级传向该组件，但并不包含在 props 内的属性
<!-- parent.vue -->
<Child msg="hello world" :name="'child'"></Child>

/* child.vue */
export default {
  props: { name: String },
  setup(props, context) {
    console.log(props) // {name: 'child'}
    console.log(context.attrs) // {msg: 'hello world'}
  },
}
  • emit用于在子组件内触发父组件的方法
<!-- parent.vue -->
<Child @toggle="toggle"></Child>

/* child.vue */
export default {
  setup(_, context) {
    context.emit('toggle')
  },
}
  • slots用来访问被插槽分发的内容，相当于 vm.$slots
<!-- parent.vue -->
<Child>
  <template v-slot:header>
    <div>header</div>
  </template>
  <template v-slot:content>
    <div>content</div>
  </template>
  <template v-slot:footer>
    <div>footer</div>
  </template>
</Child>

/* child.vue */
export default {
  setup(_, context) {
    const { header, content, footer } = context.slots
    return () => h('div', [h('header', header()), h('div', content()), h('footer', footer())])
  },
}

2.script setup

script setup是 Vue3 的一个新语法糖，相比于普通的语法，简化了组合式API必须return的写法，拥有更好的运行时性能。

  1. 声明的内容可以直接在模板中使用
  2. 自动注册组件
  3. 动态组件，应该使用动态的:is来绑定
  4. 必须使用 defineProps 和 defineEmits API 来声明 props 和 emits
  5. script setup的组件是默认关闭的，需要defineExpose明确要暴露的属性
  6. 通过 useSlots 和 useAttrs 两个辅助函数使用slots和 attrs
  7. script setup中可以使用顶层 await。结果代码会被编译成 async setup()

3.attrs 属性可以看做 props 的加强版

区别：

  1. props 要先声明才能取值，attrs 不用先声明
  2. props 声明过的属性，attrs 里不会再出现
  3. props 不包含事件，attrs 包含
  4. props 支持 string 以外的类型，attrs 只有 string 类型
    （具体可见官网）

二.案例

💥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>
# javascript # vue.js # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue