Vue子传父详细教程

2024-06-11 20:27:44

子传父通过自定义事件，this.$emit（"自定义方法名1"，需要传的值）进行传值。

本文父组件：shopping.vue

子组件：shoplist.vue

1.第一步，在父组件中引入子组件（父组件内）

import shoplist from '../shoplist.vue'

2.在子组件内定义数据（子组件内）

data() {
           return {
               children:"this is children"
           };
       },

3.自定义一个方法，用于触发传值事件（子组件内）

<button @click="pass">子传父</button>

4. 通过方法传值（子组件内）

$("第一个参数为自定义方法名"，第二个参数为需要传递的值)

methods:{
           pass(){
               this.$emit("passfunction",this.children)
           }
       },

5.在父组件定义一个自定义事件2接收子组件传递过来的事件（父组件内）

等于号前面@passfunction需和子组件自定义方法名一样

等于号后面为父组件自定义方法名，需和下方的方法名对应

<shoplist @passfunction = "meetfunction"></shoplist>

6.在data中定义一个值用来存储接收的值（父组件内）

通过自定义方法2接收传递过来的值（父组件内）

data() {
           return {
               meetdata:[],
           }
       },

methods: {
           meetfunction(val){
               this.meetdata = val
           }
       },

最后meetdata中的数据即为子组件传的数据

父传子文章详细教程链接：https://blog.csdn.net/m0_62956518/article/details/124581942

Vue子传父详细教程相关推荐

Vue子传父，父传子
vue中父组件向子组件传值 1.定义父组件 <template><div>父组件:<input type="text" v-model="n ...
Vue.js-Day04-AM【父子组件通信（父传子、子传父）、动态组件、组件的生命周期、动画】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.复习父子组件通信 1.1.父传子(自定义属性) 1.2.子传父(自定义事件) 2.动态组件 2.1.实现 ...
自我总结篇之vue的组件通信（父传子子传父非父子）
一:父传子父组件代码如下: <template><div class="father"><child :message='message' :mes ...
【Vue 组件化开发三】父组件给子组件传递数据、组件通信（父传子、子传父）、父访问子（children、ref）、动态组件（is、component）
目录一.前言完整内容请关注: 二.父组件给子组件传递数据 1.使用props属性,父组件向子组件传递数据 1.使用组件的props属性 2.向cmessage对象传值 2. props属性使用 1 ...
vue组件通讯：父传子、子传父、事件发射详解
1.组件通讯每个组件有自己的数据, 提供在data中:每个组件数据独立, 组件数据无法互相直接访问 (合理的) 但是如果需要跨组件访问数据, 怎么办呢? => 组件通信组件通信的方式有 ...
Vue组件通信(父传子、子传父、兄弟通信)
一.父组件传到子组件父组件是通过props属性给子组件通信的数据是单向流动父->子 (子组件中修改props数据,是无效的,会有一个红色警告) 1 . 父组件parent.vue代码如下: ...
vue的三种传值方式：父传子，子传父，子传子
vue 不同组件间传值方式 1 父传子 2 子传父 3 非父子传值 1.父组件向子组件进行传值(父传子) 父组件: <div><input type="text" ...
vue中父传子和子传父，传值方法
1.关于传值的规则 props值是对象的时候,传递的属性以对象的形式保存在props里面,对象里面的字段可以对传递的属性进行验证或者添加一些匹配验证规则. <div id="app&q ...
【Vue】组件间传值的三种方式：父传子，子传父，非父子传值
引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示: 1,父组件传值给子组件代码: &l ...

最新文章

热门文章