uniapp 子组件向父组件传值

使用组件可以减少代码的重复率，提高写代码的效率，改起来也方便。

最近在使用uni-app做项目，一套代码多端实现，做些简单的项目还是可以的。废话少说，说说子组件向父组件传值。

子组件获取到值的时候，使用$emit传给父组件：

this.$emit("getChild1",this.list);

父组件首先引入子组件：

import child1 from './child1'

注册子组件：

components: {child1,child2},

然后可以使用子组件：

<child1 @getChild1 = "getChild1" v-if="current==0"></child1>

注意，子组件的提交的函数名，和父组件里使用子组件@后的名字是一样的。

但是要注意：子组件获取数据的函数要在created(){}里面获取，这个坑，要注意！！

在methods里可以获取到子组件的数据：

getChild1(e){console.log(e)},

效果大概就是这样：

代码我也贴出来好了：

首页是，目录结构：

res.json:

{"code": 100,"fruitData": ["西红柿","黄瓜","苹果"],"filmData": ["西红柿首富","101次求婚","肖申克的救赎"]
}

child1:

<template><view class="content"><view v-for="(item,index) in list" :key="index">{{item}}</view></view>
</template><script>export default {data() {return {list: []}},components: {},onLoad() {},created() {var data = require('../../static/res.json')this.list = data.fruitDatathis.$emit("getChild1",this.list);},methods: {}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200upx;width: 200upx;margin-top: 200upx;margin-left: auto;margin-right: auto;margin-bottom: 50upx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36upx;color: #8f8f94;}
</style>

child2:

<template><view class="content"><view v-for="(item,index) in list" :key="index">{{item}}</view></view>
</template><script>export default {data() {return {list: []}},components: {},onLoad() {},created() {var data = require('../../static/res.json')this.list = data.filmDatathis.$emit("getChild2",this.list);},methods: {}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200upx;width: 200upx;margin-top: 200upx;margin-left: auto;margin-right: auto;margin-bottom: 50upx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36upx;color: #8f8f94;}
</style>

parent:

<template><view class="content"><view class="btn-container"><button @click="getData(index)" v-for="(item,index) in list" :key="index">{{item}}</button></view><child1 @getChild1 = "getChild1" v-if="current==0"></child1><child2 @getChild2 = "getChild2" v-if="current==1"></child2></view>
</template><script>import child1 from './child1'import child2 from './child2'export default {data() {return {list:['水果','电影'],current:0}},onLoad() {},components: {child1,child2},methods: {getData(index){this.current = index},getChild1(e){console.log(e)},getChild2(e){console.log(e)}}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.btn-container{display: flex;justify-content: space-between;align-items: center;}
</style>

大概就是这些。

uniapp 子组件向父组件传值相关推荐

019_Vue子组件向父组件传值
1. 父组件向子组件传递信息 1.1. props传递数据原则: 单向数据流. 1.2. 子组件通过自定义事件向父组件传递信息 <button @click='$emit("enlar ...
组件间数据交互——父组件向子组件传值（ props属性值类型）子组件向父组件传值-携带参数 || 非父子组件间传值
父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
react 子传参父_React 子组件给父组件传值、整个组件、方法
一.准备工作 1.定义一个父组件,名字为Parent /src/component/Parent.js import React, {Component} from 'react' export de ...
vue2.0 子组件和父组件之间的传值
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
VUE：父子组件间传参、子组件传值给父组件、父组件传值给子组件
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子 ...
react 子传参父_React 子组件向父组件传值的方法
本文介绍了React 子组件向父组件传值的方法,分享给大家子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件 ...
（25）Vue.js组件通信—父组件向子组件传值
一.Vue.js组件通信介绍子组件如何获取父组件中的数据?父组件如何得知子组件的数据变更?如果是更加复杂的组件关系呢?在组件间传递数据的操作,称为组件通信. 二.Vue.js组件通信内容 • 父组件 ...
vue 子组件给父组件传值
vue通信之子组件给父组件传值子组件给父组件传值背景一般是子组件中某一事件之后,得到的某一状态或者是值,想要通知父组件改变. 通过自定义事件传值. 子组件: <Button type=&quo ...
vue子组件给父组件传值时接收不到数据
子组件给父组件传值的步骤如下: 1.在子组件中创建一个按钮,给按钮注册一个点击事件. 2.在响应点击事件中使用$emit来触发一个自定义事件,并且传递需要的参数 3.在父组件中的子标签中监听该自定义事 ...

uniapp 子组件向父组件传值

uniapp 子组件向父组件传值相关推荐

最新文章

热门文章