VUE 2.0 父子组件之间的通信

父组件是通过props属性给子组件通信的来看下代码：

父组件：

<parent><child :child-com="content"></child> //注意这里用驼峰写法哦
</parent>data(){return {content:'sichaoyun'};
}

子组件通过props来接受数据

第一种方法

props: ['childCom']

第二种方法

props: {childCom: String //这里指定了字符串类型，如果类型不一致会警告的哦
}

第三种方法

props: {childCom: {type: String,default: 'sichaoyun' }
}

子组件与父组件通信

vue2.0只允许单向数据传递，我们通过出发事件来改变组件的数据，废话少说，上干货

子组件代码

<template><div @click="open"></div>
</template>methods: {open() {this.$emit('showbox','the msg'); //触发showbox方法，'the msg'为向父组件传递的数据}
}

父组件

<child @showbox="toshow" :msg="msg"></child> //监听子组件触发的showbox事件,然后调用toshow方法methods: {toshow(msg) {this.msg = msg;}
}

兄弟组件之间的通信

我们可以实例化一个vue实例，相当于一个第三方

let vm = new Vue(); //创建一个新实例

组件他哥

<div @click="ge"></div>
methods: {ge() {vm.$emit('blur','sichaoyun'); //触发事件}
}

组件小弟接受大哥命令

<div></div>
created() {vm.$on('blur', (arg) => { this.test= arg; // 接收});
}

VUE 2.0 父子组件之间的通信相关推荐

Vue中关于父子组件之间的通信
父子组件之间的通信是vue中的基础知识,在此做一个简单的梳理. 总的来说父传子是通过props,子传父是通过$emit. 简单的一个demo来说说,先上代码父组件: 如图,HelloWorld是一个 ...
vue/父子组件之间的通信
父子组件之间的通信父组件绑定数据在组件上子组件props属性接收父组件内的data属性中待传的数据data1 => <cpn :data2="data1">& ...
Vue非父子组件之间的通信
文章目录非父子组件的通信 1.Provide和Inject 1.1基本使用 1.2处理响应式数据(了解) 2.全局事件总线非父子组件的通信此篇讲解的是, 在学习状态管理之前, 非父子间通信的方案 ...
Vue中父子及非父子组件之间的通信方法
Vue中父子及非父子组件之间的通信方法父子组件之间的通信方法父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...
vue的父子组件之间的通信详解
vue的父子组件之间的通信详解一.父组件给子组件传值父组件引入子组件,并对子组件进行监听 <template><div><h1&g ...
React（一）父子组件之间的通信
无论是React,还是Vue,父子组件之间的通信都是组件式开发至关重要的一部分.备注一下基础要点. 1.父组件向子组件传值父组件向子组件传值是在调用子组件的时候通过参数传递给子组件 .父组件代码 i ...
Vue 3.0父子组件通信
在Vue 3.0 发布以后,我们基于新的特性,来归纳一下父子组件通信的方式.并且检验一下Vue 2.0中常用的通信方式,如何在Vue 3.0中使用.本文列出了三种常用的通信方式: 子组件通过emit函 ...
【Vue】父子组件之间的通信
情景父组件有一个 btnList 数组,里面存放着按钮的名称和按钮的id,现在要把这个数组传入到子组件中进行渲染. 子组件渲染出按钮后,点击按钮,父组件的 h1 标签中会显示出当前点击的按钮是哪一个 ...
vue父子组件之间的通信
在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使用,遇到业务逻辑操作时子组 ...

VUE 2.0 父子组件之间的通信

VUE 2.0 父子组件之间的通信相关推荐

最新文章

热门文章