app 父组件与子组件传值方法

置顶汐釉

已于 2023-03-01 15:52:22 修改

阅读量500

点赞数

文章标签： uni-app 小程序 vue.js 前端 vue

于 2023-02-28 14:33:41 首次发布

本文链接：https://blog.csdn.net/qq_43351282/article/details/129260736

版权

一、父组件向子组件传值

父组件：index.vue

<template>
  <compontA :list="listData"></compontA>
</template>
 
<script>
  import comA from '@/components/compontA.vue'
  export default{
    components:{compontA},
    data(){
    return{
      listData:[
        {"name": "张三", "age": "18"},
        {"name": "李四", "age": "20"}
      ]
      }
    }
  }
</script>

子组件：compontA.vue

<template>
  <view>
    <block v-for="(item,index) in list" :key="index">
      <view class="flex">
        <text>{{item.name}}</text>
        <text>{{item.age}}</text>
      </view>
    </block>
  </view>
</template>
 
<script>
  export default {
    name: "compontA",
    props:{
        list: {
		    type: Array,  
		    required:true
		},//数组类型
		savedata: {
			type: Object,
		},//字符串类型
		total: {
			type: Number,
			default:0,
		},//数字类型
    },
    data() {
      return {}
    },
  }
</script>

二、子组件向父组件传值

父组件：index.vue

<template>
  <compontA @ChildClick="childClick"></compontA>
</template>
 
<script>
  import comA from '@/components/compontA.vue'
  export default{
    components:{compontA},
    methods:{
      childClick(e){
        console.log(e)
      }
    }
  }
</script>

子组件：compontA.vue

<template>
  <view @click="sendValue"></view>
</template>
 
<script>
  export default {
    name:"compontA",
    props:{},
    methods:{
      sendValue: function(){
        // 向父组件传值
        this.$emit("childClick","来自子组件的值")
      },
    }
  }
</script>

三、子组件通过按钮按钮触发传参数到父组件

子组件：compontA.vue

<u-button @click="$emit('exchange', '参数')">按钮</u-button>

父组件：index.vue

<template>
  <compontA  @exchange="handleExchange" ></compontA>
</template>

<script>
  import compontA from '@/components/compontA.vue'
  export default{
    components:{compontA},
    methods:{
      handleExchange(e) {	
		console.log('e====>',e)
	    },
    }
  }
</script>