03-vue组件传值

基于现在都是模块化开发，vue开发过程中组件之间传值是必不可少的，常用的vue的组件传值分为三种方式：父传子、子传父、非父子组件传值。

一、父组件给子组件传值----通过属性

(1)创建一个子组件
(2)写好子组件中自己的逻辑
(3)通过 props:[父组件传值的key] 来接收父组件传递的值
props可接收对象（属性为传递的值，属性值为规定传递值的数据类型）、数组格式的值

(1)导入子组件

import subimagesilder from '../subcomponent/subimagesilder.vue';

(2)注册子组件

  components:{
     subimagesilder 
  }

(3)在<template></template>中使用子组件

<subimagesilder :imageList="imageList"></subimagesilder>

注意：imageList是父组件给子组件传递的值
形式：<子组件对象 :父组件传值的key=值></子组件对象>

(1)写好子组件自己的代码
(2)在需要传值给父组件数据的地方定义并调用key事件

this.$emit(key,值)

key表示自定义事件名，值表示要传递的值
这里表示会触发key事件
注意,这个key等下在父组件中要使用到

(1)导入子组件
(2)在components中注册子组件
(3)在<template></template>中使用子组件
(4)在子组件的标签中,注册（绑定）key事件发生时执行的函数名称，例如:

 <subnumber v-on:key='函数名称'></subnumber>

(5)在父组件的methods中,写好接收子组件传过来的值的函数即可，例如:

    methods:{
        函数名称(子组件传递过来的值){
            xxxxxx
        }
    }

子组件负责触发key事件，父组件负责注册key事件

方式1：创建一个公共的vue实例（在js中），并且导出，在传值和接收值的两方都引入这个js
方式2：Vue.prototype.bus = new Vue();
表示先在Vue的原型上添加bus属性，值为Vue的一个实例x。之后创建的Vue实例中都带有bus属性，并且bus属性值都指向Vue实例x

通过 vue实例.$emit() 传值。传值方触发自定义事件

通过 Vue实例.$on() 接收。接收方注册自定义事件

注意：触发和监听两个操作必须在公共的vue实例中进行传值和接收值

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。