VUE组件传参超详细讲解

目录
  • Vue.cli 中怎样使用自定义的组件
  • Vue 组件如何进行传值的
    • 父组件向子组件传递数据
    • 子组件向父组件传递数据
    • 非父子组件之间传递数据
      • 父传子例子
      • 子传父例子
  • Vue组件data为什么必须是函数
  • 组件的命名规范
  • Vue 组件里的定时器要怎么销毁

Vue.cli 中怎样使用自定义的组件

第一步：在 components 目录新建你的组件文件（CounterCom.vue），script一定要export default {}

第二步：在需要用的页面（组件）中导入：

import CounterCom from './components/CounterCom.vue'

第三步 ： 注 入 到 Vue 的子组件的 components 属性上面,

components:{CounterCom}

第四步：在 template 视图 view 中使用

<CounterCom ></CounterCom>

<counter-com></counter-com>

Vue 组件如何进行传值的

父组件向子组件传递数据

父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属 性并把数据绑定在自定义属性上，在子组件添加参数 props 接收即可

子组件向父组件传递数据

子组件通过 Vue 实例方法 $emit 进行触发并且可以携带参数，父组件监听使 用@（v-on）进行监听，然后进行方法处理

非父子组件之间传递数据

1、引入第三方 new Vue 定义为 eventBus

2、在组件中 created 中订阅方法 eventBus.$on("自定义事件名",methods 中的方法名)

3、在另一个兄弟组件中的 methods 中写函数，在函数中发布 eventBus 订 阅的方法 eventBus.$emit("自定义事件名”)

4、在组件的 template 中绑定事件(比如 click)

父传子例子

使用props

父传给子的数组是只读的(做默认值,读取显示)

不能进行修改

App.vue文件中

<CounterCom :num="365"></CounterCom>

CounterCom.vue组件中

  //01接收参数并定义默认值
props:{
    "num":{type:Number,default:1},
}
//02使用参数num
data() {
            //02 使用num:把传过来的num赋值给counter
            return {
                counter: this.num
            }
        }

具体示例如下:

子传父例子

使用的事件 $emit

CounterCom.vue组件中

<button class="active" @click="counter++;$emit('counterchange',counter)">
        {{counter}}
    </button>

App.vue

<counter-com @counterchange="n=$event"></counter-com>

$emit(事件名,事件值) 子组件主动触发一个事件,并传递一个位置,事件名(counterchange)和事件值(counter)是自定义的

$event固定写法,事件的值(counterchange事件的值,也是数组的第二个参数)

Vue组件data为什么必须是函数

1、每个组件都是 Vue 的实例。

2、组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变 其中一个会影响其他

3、组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用 一次组件，就会返回一份新的 data，类似于给每个组件实例创建一个私 有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式， 就使得所有组件实例共用了一份 data，就会造成一个变了全都会变的结 果。

组件的命名规范

给组件命名有两种方式

一种是使用链式命名 my-component

一种是使用大驼峰命名 MyComponent

在 字 符 串 模 板 中

<my-component></my-component>

和

<MyComponent></MyComponent>都可以使用， 在非字符串模板中最好使用<MyComponent></MyComponent>，因为要遵循 W3C 规 范中的自定义组件名 (字母全小写且必须包含一个连字符)，避免和当前以及未 来的 HTML 元素相冲突

Vue 组件里的定时器要怎么销毁

如果页面上有很多定时器，可以在 data 选项中创建一个对象 timer， 每个定时器取个名字一一映射在对象 timer 中， 在 beforeDestroy 构造函数中

for(let k in this.timer){clearInterval(k)}；

如果页面只有单个定时器，可以这么做。

const timer = setInterval(() =>{}, 500);
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})

到此这篇关于VUE组件传参超详细讲解的文章就介绍到这了,更多相关VUE组件传参内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3父子组件传参有关sync修饰符的用法详解

    Vue3父子组件传参有关sync修饰符的用法详解

    目录 单向数据流讲解 Vue2.x使用 定义事件的形式, 通知父组件修改 .sync 和 update: 的使用 父传子, 传递多个数据的简写 采用v-model简写(要求严格) Vue3.x使用 普通用法 简写 单向数据流讲解 单向数据流(堆可以修改,栈不可修改) 我们都知道, 父传子的数据, 是单向数据流,即子组件不能直接修改, 父组件传递过来的值 但实际上, 对于修改值, 真正是:基本数据类型不可修改,复杂数据类型不要修改引用地址(栈),它的值可以随便修改 Vue2.x使用 定义事件的形式

  • vue嵌套组件传参实例分享

    vue嵌套组件传参实例分享

    目录 递归嵌套组件参数传递 深层递归组件事件丢失 EventBus 什么事EventBus? 前言: 假设我们已经了解vue组件常见的有父子组件通信,兄弟组件通信.而父子组件通信很简单,父组件会通过 props 向下传数据给子组件,当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件.那么当两个组件之间不是父子关系,怎样传递数据呢? 先来看一下这个例子: 递归嵌套组件参数传递 我们封装了一个名为 NestedDir 的子组件(嵌套目录的意思),内容如下(用到了element ui组件)

  • vue组件和iframe页面的相互传参问题及解决

    vue组件和iframe页面的相互传参问题及解决

    目录 vue组件和iframe页面相互传参 vue组件调用iframe页面方法和参数 iframe页面向vue组件传参 内嵌iframe页面并进行传值 vue组件和iframe页面相互传参 目前网上大多关于iframe父子传参的博客都是在叙述父页面是html文件,子iframe文件也是html文件,涉及到父页面是vue组件子iframe页面是html的博客多数讲的不是很明白: 而最近我在项目中碰到了这种需求:在vue组件中嵌入iframe页面,并实现父子传参: vue组件调用iframe页面方法

  • 关于Vue组件间的常用传参方式

    关于Vue组件间的常用传参方式

    目录 组件间常用传参方式 1. props.emit(最常用的父子通讯方式) 2. 事件总线EventBus(常用任意两个组件之间的通讯) 3.Vuex状态管理 vue组件传参记录 几个不太常用的组件传值方法记载 parent / children 传参调用方法 eventBus这个自己安装下 provide/inject 组件间常用传参方式 1. props.emit(最常用的父子通讯方式) 父传子 父组件传入属性,子组件通过props接收,就可以在内部this.XXX的方式使用 // 父组件

  • Vue路由组件通过props配置传参的实现

    Vue路由组件通过props配置传参的实现

    目录 一.基于params参数传递 1.index.js(路由配置) 2.Box_1.vue(父路由组件 - 发送参数) 3.Menu_1.vue(子路由组件 - 接收参数) 二.基于Query和params参数传递(通用) 1.index.js(路由配置) 2.Box_1.vue(父路由组件 - 发送参数) 3.Menu_1.vue(子路由组件 - 接收参数) 本文主要介绍了 Vue路由组件通过props配置传参的实现,分享给大家,具体如下: 一.基于params参数传递 1.index.js

  • VUE组件传参超详细讲解

    VUE组件传参超详细讲解

    目录 Vue.cli 中怎样使用自定义的组件 Vue 组件如何进行传值的 父组件向子组件传递数据 子组件向父组件传递数据 非父子组件之间传递数据 父传子例子 子传父例子 Vue组件data为什么必须是函数 组件的命名规范 Vue 组件里的定时器要怎么销毁 Vue.cli 中怎样使用自定义的组件 第一步:在 components 目录新建你的组件文件(CounterCom.vue),script一定要export default {} 第二步:在需要用的页面(组件)中导入: import Coun

  • Vue组件之间的通信方式详细讲解

    Vue组件之间的通信方式详细讲解

    目录 前言 一.父级传数据给子级 1.传输固定的具体数据 2.动态语法 3.子组件调用父组件 二.子级传数据给父级 1.使用自定义事件 2.$refs的使用 3.同级别组价以及任意组件之间的数据传递 前言 在前面,我们已经了解了vue的组件以及vue组件之间的层级关系,这个在博主的往期博客,感兴趣的可以往前挪,地址是: 1.vue组件 2.vue组件的层级关系 本文主要编写记录的是,组件之间的通信的模式以及通信的方式,我们的组件之间只能调用自己的属性和自己的方法,不能调用其他组件的属性以及方法,

  • Vue组件与生命周期详细讲解

    目录 写在前面 生命周期 图解 总结 写在前面 Vue.js的核心就是以简洁的模板语法将数据渲染进Dom系统.vue实例在渲染成html的时候往往要经过以下的步骤: 读取数据和方法,设置数据绑定和监听 解析template 将实例挂载到Dom,并将实例状态和视图绑定,在执行这些步骤的时候,vue还提供了一些生命周期的方法,用来在不同的阶段对代码做增添和修改. 生命周期 beforeCreate vue实例初始化,数据监听和方法属性挂载之前调用 created 数据监听和方法属性挂载之后调用,是最

  • Vue组件的渲染流程详细讲解

    目录 引言与例子 举一个工作中能用到的例子: 实现 extend 执行流程 1. 注册流程(以Vue.component()祖册为例子): 2. 执行流程 3. 渲染流程 总结 注: 本文目的是通过源码方向来讲component组件的渲染流程 引言与例子 在我们创建Vue实例时,是通过new Vue.this._init(options)方法来进行初始化,然后再执行$mount等,那么在组件渲染时,可不可以让组件使用同一套逻辑去处理呢? 答:当然是可以的,需要使用到Vue.extend方法来实现

  • vue-router传参的四种方式超详细讲解

    目录 vue路由传参的四种方式 一.router-link路由导航方式传参 二.调用$router.push实现路由传参 三.通过路由属性name匹配路由,再根据params传递参数 四.通过query来传递参数 vue-router传递参数的几种方式 vue路由传参的四种方式 一.router-link路由导航方式传参 父组件:<router-link to="/跳转到的路径/传入的参数"></router-link>子组件:this.$route.param

  • vue slot与传参实例代码讲解

    插槽分为默认插槽和具名插槽: 默认插槽: //父组件 <div> <h3>父组件</h3> <testChild> <div>默认插槽</div> </testChild> </div> //子组件 <div> <h4>子组件</h4> <slot></slot> </div> 具名插槽: 注意:具名插槽需要包裹在  template  标

  • Vue路由传参详细介绍

    Vue路由传参详细介绍

    目录 路由传参 效果展示 params的类型(后附源码) ​​​​​​query参数的类型 路由name 路由传参 效果展示 通过传参,可以让Persons路由组建中的内容,在新的路由组件Show显示出来,Show路由组件要嵌套到Persons路由组件中 Persons路组件中的内容 params的类型(后附源码) path:‘show/:id/:realname’ :id/:realname,是为传参所声明的,props:true 可以理解成可以传参,这只是其中的一种方法,也是个人觉得最简单理

  • vue.js 父向子组件传参的实例代码

    vue.js 父向子组件传参的实例代码

    1.新建componentA.vue组件,代码如下: store.js代码如下: const STORAGE_KEY = 'todos-vue.js' export default{ fetch(){ return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') }, save(items){ window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items)); }

  • vue中路由传参以及跨组件传参详解

    路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$router.go(1); <router-link to="/course">课程页</router-link> <router-link :to="{name: 'course'}">课程页</router-link> 路由

  • 详解Vue 路由组件传参的 8 种方式

    详解Vue 路由组件传参的 8 种方式

    我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过来的参数,从而完成服务器请求,所以,我们需要了解路由传参的几种方式,以下方式同 vue-router@4 . 编程式路由传参 除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. 1. 通过 params 传递 路由配置 路径参数 用冒号 : 表示. const routes = [ // 动态段以冒号开始 { pat

随机推荐