Vue组件间通信：父传子（props），子传父（$emit）

父子组件的关系可以总结为 prop 向下传递，emit事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件emit事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件emit事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件emit给父组件发送消息.

一、父组件向子组件传参：
看代码：
父组件

<template><div><h1>我是父组件</h1><!-- ：title名称与子组件prop中的名称一致=”title“ 与父组件中data数据中的title名称一致 --><children :title="title" :contents="content"></children></div>
</template>>
<script>
import Children from "./Children";
export default {data() {return {title: "我是父组件的标题",content: "我是内容"};},components: {Children}
};
</script>

子组件：

<template><div><h1>children</h1><span>{{title}}</span><br /><span>{{contents}}</span></div>
</template>>
<script>
export default {props: {title: String,contents: String}
};
</script>>

父组件向子组件传值
总结一下：

父组件中引入子组件、注册子组件，tempalte中使用子组件； import 、components、
子组件： props中创建一个属性，接受父组件传的值；
在template中使用 {{contents}}；
父组件中的，：title与子组件中prop添加的属性名称要一致；
=”title“与父组件中data数据中的title名称要一致；

注意：
props的值的写法：

 props: {title: String,}

 props: {title: {type: String,  // [String, Number],default: 1}}

二、子组件向父组件传值
1.在子组件中创建一个按钮，给按钮绑定一个点击事件

2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

子组件：

<template><div><h1>children</h1><button @click="sendTOParent">向父组件传值</button></div>
</template>>
<script>
export default {data() {return {data: "子组件中的信息"};},methods:{sendTOParent(){this.$emit('listenToChildEvent',this.data)}}
};
</script>>

3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法。
父子间代码

<template><div><h1>我是父组件</h1><children v-on:listenToChildEvent = 'showMsgfromChild'></children></div>
</template>>
<script>
import Children from "./Children";
export default {data() {return {};},methods:{showMsgfromChild(data){console.log(data)}},components: {Children},
};
</script>

子组件向父组件传值总结：
1.父组件：引入子组件，住处，在tempalte中使用；
import 、components、
2. 子组件：
1）在template中定义一个按钮：
<button @click=“sendTOParent”>向父组件传值，
2）在methods中：
sendTOParent(){
this.$emit(‘listenToChildEvent’,this.data)
}
istenToChildEvent函数
this.data是要参数；
3. 父组件中：
4. 在tempalte中接受：
1），
2）methods中：
showMsgfromChild(data){
console.log(data)
}

文字版解释：
子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

Vue组件间通信：父传子（props），子传父（$emit）相关推荐

Vue.js解析(十)【Vue组件间通信】
什么是Vue组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊 ...
Vue2组件间通信——父传子值props
Vue2组件间通信--父传子值props Vue2中组件间通信系列,本篇是关于父组件向子组件传值的介绍,这里我会用通俗的语言帮助大家理解props配置项功能: 子组件可以接收到父组件传递的数据信息, ...
vue组件间通信传递数据的四种方式（路由传参、父子组件传参、兄弟组件传参、深层次传参）
前言: vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的,对于一些刚入门的伙伴来说可能就有些迷茫,感觉方式有很多种,但是总结起来又不知道应该怎么说,在下面的文章中,我结合自己的开发过程中经常 ...
vue组件间通信六种方式
vue组件间通信六种方式组件之间的传值通信组件之间的通讯分为三种:父传子.子传父.兄弟之间的通讯: props/$emit 父传子:主要是通过props来实现的具体实现:父组件通过import引 ...
Vue 组件间通信有哪几种方式
Vue 组件间通信主要指以下 3 类通信:父子组件通信.隔代组件通信.兄弟组件通信 1.props / $emit 适用父子组件通信 props是父组件将值传给子组件,$emit是子组件通过派发事件 ...
vue组件间通信之兄弟组件通信（vue3.0$EventBus）
vue组件间通信之兄弟组件通信(vue3.0$EventBus) vue组件中的数据传递最最常见的就是父子组件之间的传递.父传子通过props向下传递数据给子组件:子传父通过$emit发送事件,并携带 ...
Vue 组件间通信方法汇总
Vue 组件间通信方法汇总 ⭐️ 更多前端技术和知识点,搜索订阅号 JS 菌订阅除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案.文章整理一下父子组件.兄弟组件.祖先后代组件间 ...
vue组件间通信六种方式（完整版）
前言组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示 ...
每日一道面试题：Vue 组件间通信有哪几种方式？
Vue 组件间通信有哪几种方式? 父子组件通信.隔代组件通信.兄弟组件通信 (1)props / $emit适用父子组件通信 - 这种方法是 Vue 组件的基础,相信大部分同学耳闻能详,所以此处就不 ...
Vue 组件间通信几种方式（完整版）
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是 ...

Vue组件间通信：父传子（props），子传父（$emit）

Vue组件间通信：父传子（props），子传父（$emit）相关推荐

最新文章

热门文章