父子组件间的通讯

因为vue进行组件开发时候,允许组件进行嵌套,因此父子组件需要进行通讯来获取父组件或子组件中的数据。

父传子

父组件给子组件传数据通过在子组件的标签上绑定属性,将数据绑定给某个属性

子组件要获取父组件传过来的信息,必须在内部定义props属性

子组件标签上:

:c-message="message"

子组件内部定义porps:

数组写法

props:[‘cMessage‘]

对象写法

props:{
   cMessage:String//数据类型限制
}

最全的设置写法
props:{    cMessage:{//数据名称为驼峰,因此在绑定属性时要这样写=>:c-message="message" 差值写法不用变=>{{cMessage}}    type:String,//类型限制 多种类型时=>type:[String,Number]    default:‘默认内容‘,//如果没有传值时的默认值    // 当type是数组或对象时,default必须是一个函数,并且返回一个数组或对象    //default:function(){ return []  }    required:true//是否必须传值,true时必须传值  }}

子传父

子组件给父组件传数据通过在子组件的标签上绑定自定义事件监听,监听子组件是否发送播报

子组件要发送播报,必须通过$emit函数

子组件标签上:

@li-emit="getEmitEvent"

子组件内部使用$emit:

内部template:

<li v-for="item in list" @click="eventEmit(item)">{{item.id}}-{{item.name}}</li>

内部methods:

methods:{//子组件方法  eventEmit:function(item){    //通过组件的$emit 自定义事件并发送给父组件 $emit(事件名,传递的参数)    this.$emit(‘li-emit‘,item)  }}

父组件内部获取子组件的数据

methods:{//父组件的方法  getEmitEvent:function(item){//获取子组件传来的数据    alert(item.name)  }}

原文地址:https://www.cnblogs.com/chujunqiao/p/11625547.html

时间: 2024-10-07 12:13:09

父子组件间的通讯的相关文章

Vue入门七、父子组件间通讯

一.父子组件通讯 父传子:1.父用子的时候通过属性传递2.子要声明props:['属性名']接收3.子组件template中直接用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="

第四节:Vue表单标签和组件的基本用法,父子组件间的通信

vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"&

非父子组件间的传值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父子组件间的传值(Bus/总线/发布订阅模式/观察者模式)</title> <script src="./vue.js"></script> </head> <body> <div

vue的父子组件间传值以及非父子间传值

Vue组件间的传值方式: 父传子 子传父 非父子间传值 1.首先父组件传值给子组件,使用bind绑定属性,然后在子组件用props接收属性值. //父组件 <template> <input type="text" /> <br/> <child :inputValue="inputValue"></child> </template> <script> import child f

父子组件间的传值

父子组件间通信 父组件-->子组件 1.父组件通过给子组件添加属性给子组件传值,子组件通过props来接受. 2但是要在属性前加“:”,即使用v-bind指令,才能使属性值是js代码,不然就是字符串. 3.单项输出流.即子组件不允许修改父组件传递的值,只能使用,不能修改. 父组件通过属性向子组件传值时,如果传递的是引用型的值,这时候子组件对父组件传递的值进行修改可能会影响其他子组件对这个引用类型值的使用. 解决办法:子组件在data项中新赋值父组件的变量,操作新的变量即可. 子组件-->父组件

非父子组件间传值(一)

非父子组件间传值有两种方法,一种是vuex共享数据,另一种是发布订阅模式/观察者模式/总线/Bus.这篇随笔主要总结总线机制的学习心得: 首先通过在Vue.prototype上挂载一个bus属性,指向vue实例:接下来在调用Vue或者创建组件时都会有bus属性. Vue.prototype.bus=new Vue() var Child={ props:['content'], data:function() { return {num:this.content} }, //因为vue是单项数据

vue非父子组件间通信

有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的Vue实例作为中央事件总线: 有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: var bus = new Vue() // 触发组件 A 中的事件 bus.$emit('id-selected', 1) // 在组件 B 创建的钩子中监听事件 bus.$on('id-selected', function (id) { // ... }) 在更多复杂的情况下,你应该考虑使用专门的 状态管

React组件间的通讯

组件化开发应该是React核心功能之一,组件之间的通讯也是我们做React开发必要掌握的技能.接下来我们将从组件之间的关系来分解组件间如何传递数据. 1.父组件向子组件传递数据 通讯是单向的,数据必须是由一方传到另一方.在 React 中,父组件可以向子组件通过传 props 的方式,向子组件进行通讯. class Parent extends Component{ state = { msg: 'start' }; componentDidMount() { setTimeout(() =>

非父子组件间通信

非父子组件之间的通信,可以通过一个空的 Vue 实例作为中央事件总线(事件中心),用他来触发事件和监听事件. 在这里,如果是工作中的新手看了官网的例子直接上手写,会有些发懵.这个作为事件总线空的 Vue 实例我该写哪里去?因为工作中我们的组件都是互相独立的,不可能写一起的,作用域是不同的,所以需要稍作调整 一.在 main.js 中初始化根 Vue 之前,添加一个 data 对象,内写入一个名为 Event 的空 Vue 对象,也就是中央事件总线 new Vue({ el: '#app', da