vue 组件的注册使用传值插槽

最新推荐文章于 2024-03-22 16:42:47 发布

jingerh126

最新推荐文章于 2024-03-22 16:42:47 发布

阅读量207

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/jingerh126/article/details/105249993

版权

本文详细介绍了Vue组件的注册和使用，包括局部注册和全局注册的步骤，以及组件间传值的各种方法，如父组件向子组件传参、通过ref调用组件方法、子组件调用父组件方法、子组件添加自定义事件实现双向通信，还有非父组件间的传值策略。

摘要由CSDN通过智能技术生成

一、组件的注册和使用

1. 组件的局部注册使用步骤：

步骤1：定义子组件
在src中创建component文件夹用来存放子组件，然后在component中直接创建vue文件即子组件
步骤2：引入子组件
在主组件的script标签中引入子组件：import Top(组件名称) from “./component/top(组件文件路径)”;
步骤3：注册子组件
在主组件的export default中写个components属性，在该属性中注册组件，有完整写法和简写两种。
步骤4：使用子组件
在主组件的容器内用标签写入子组件。

<template>
  <div id="app">
        <top></top>                   // 使用子组件
  </div>
</template>
<script>
import top from "./component/top";    // 引入子组件
export default{
   
  name:"app",
  components:{
            // 注册子组件                
    // "v-top":top   // 1. 完整写法：键值不一样     
    top              // 2. 简写:键值一样时，可以简写
  }
}
</script