【vue组件之间互相传值：父传子，子传父】

今看到一篇很不错的vue组件传值文章，便于理解，遂做笔记～

一般页面的视图App.vue应为这样

一.父组件向子组件传值

1.创建子组件，在src/components/文件夹下新建一个Child.vue
2.Child.vue的中创建props，然后创建一个名为message的属性

3.在App.vue中注册Child组件，并在template中加入child标签，标签中添加message属性并赋值

4.保存修改的文件，查看浏览器

5.我们依然可以对message的值进行v-bind动态绑定

此时浏览器中

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

  • 子组件在props中创建一个属性，用以接收父组件传过来的值
  • 父组件中注册子组件
  • 在子组件标签中添加子组件props中创建的属性
  • 把需要传给子组件的值赋给该属性
二.子组件向父组件传值

1.在子组件中创建一个按钮，给按钮绑定一个点击事件

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

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

4.保存修改的文件，在浏览器中点击按钮

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

  • 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
  • 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
  • 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
  • 在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

---恢复内容结束---

今看到一篇很不错的vue组件传值文章，便于理解，遂做笔记～

一般页面的视图App.vue应为这样
一.父组件向子组件传值

1.创建子组件，在src/components/文件夹下新建一个Child.vue
2.Child.vue的中创建props，然后创建一个名为message的属性

3.在App.vue中注册Child组件，并在template中加入child标签，标签中添加message属性并赋值

App2.png

4.保存修改的文件，查看浏览器

browser.png

5.我们依然可以对message的值进行v-bind动态绑定

App3.png

此时浏览器中

browser2.png

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

  • 子组件在props中创建一个属性，用以接收父组件传过来的值
  • 父组件中注册子组件
  • 在子组件标签中添加子组件props中创建的属性
  • 把需要传给子组件的值赋给该属性
二.子组件向父组件传值

1.在子组件中创建一个按钮，给按钮绑定一个点击事件

Child2.png

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

Child3.png

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

App4.png

4.保存修改的文件，在浏览器中点击按钮

browser3.png

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

  • 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
  • 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
  • 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
  • 在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

原文地址：https://www.cnblogs.com/chenhongshuang/p/8678207.html

时间： 2024-08-02 20:12:19

【vue组件之间互相传值：父传子，子传父】的相关文章

Vue组件之间的传值方法

在vue当中有两种组件之间的传值方法,分别是 * 父子组件* 之间的传值和* 非父子组件 *之间的传值方法 父子组件之间的传值方法 父子组件之间的传值分为两种 * 父组件给子组件传值 子组件给父组件之间的传值 父组件给子组件传值方法 // 父 <div id = "app"> <my-content></my-content> </div> // 子 <template id="content"> <

vue 组件之间的传值

组件之间的传值有三种  1,父组件给子组件传值 ,   2,子组件给父组件传值   3, 非父子组件之间的传值(又叫兄弟组件传值) 1.父组件给子组件传值   (父组件给子组件传值需要通过props) 首先我的页面结构是这样的  child是子组件   father是父组件, 在这里我新建一个父组件  father.vue <template> <div> <div>这是父组件</div> <!-- 使用组件child --> <child

vue组件之间的传值方式

一.父组件向子组件传值方式 1.1父组件向子组件传数据方式 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta

Vue组件之间的传参

Vue组件之间的传参方式有三种 第一:父传子 第二:子传父 第三:兄弟之间相传 第一,父传子,顾名思义,外层组件传参给嵌套内部的组件 在父代中嵌套的标签 <son v-bind:toSon="fatherData"></son> //发送数据给子代 在子代中接收数据 需要添加一个属性叫做prpos props:["toSon"], <!DOCTYPE html> <html lang="en"> &

vue 学习五 深入了解components（父子组件之间的传值）

上一章记录了 如何在父组件中向子组件传值,但在实际应用中,往往子组件也要向父组件中传递数据,那么此时我们应该怎么办呢 1.在父组件内使用v-on监听子组件事件,并在子组件中使用$emit传递数据 //父组件 <template> <div id="home"> <com test='12345' test2='1213232111111' @a_even="a_even"></com> //使用v-on监听子组件事件

vue中组件之间的传值

按照对象分类: 一.父子组件之间的传值 1.使用props和$emit 2.在引入的子组件中使用ref,通过this.$refs.xxx.方法/值来获取子组件中的方法或者值 3.子组件中使用this.$parent来获取父组件中的值或者方法 4.父组件中使用this.$children来获取子组件中的值或者方法 二.兄弟组件中的传值 1.使用eventBus作为中间件,然后使用$emit去抛出事件,使用$on去监听事件 这里要注意一些事项:a.bus.$emit在beforeDestroy中去触

vue组件之间8种组件通信方式总结

本文链接:https://blog.csdn.net/zhoulu001/article/details/79548350 对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的各种方式的总结,总共有8种方式. 1. props和$emit 父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过$emit触发事件来做到的. Vue.component('child',{ data(){ return { mymessage:this.message } }

事件总线bus解决兄弟组件之间的传值

原文引用https://www.dazhuanlan.com/2019/08/25/5d625951eff92/ 事件总线bus解决兄弟组件之间的传值 实际运用: 封装一个Bus.js 123 import Vue from 'vue'const Bus = new Vue()export default Bus 在组件调用时引入 组件一: 1234567891011121314 import Bus from './Bus' export default { data() { return {

vue组件之间传值、父组件获取子组件的方法

1.子组件向父组件传值 子组件 <template>     <div class="app">        <input @click="sendMsg" type="button" value="给父组件传递值">     </div> </template> <script> export default {       data () {