问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue子组件怎么操作父组件的数据？

头像
3521200
    397964124

    每次点击的时候让对应的年龄+1 这个年龄的值来自于父组件的数据 这个+1的操作应该是在子组件还是写在父组件里面(+1的操作不写在标签内 写在父组件或者子组件内 可以吗?)

    <!DOCTYPE html>
<html>
<head>
   <title></title>
   <style type="text/css">
   li{display: inline-block;border: 1px solid black;width: 100px}
   </style>
   <script src="vue.js"></script>
   <script type="text/javascript">
      window.onload=function(){
         var contents={
             template:'#contents',
             props:['age'],
             data(){
                  return {
                     arr:[
                        {name:'zhangsan'},
                        {name:'lisi'},
                        {name:'wangwu'},
                     ]
                  }
             },
             methods:{
                change(num){
                     return num++; //这样不行
                }
             }
         }
         new Vue({
               el:'#div1',
               data:{
                arr2:[43,55,20],
               },
               components:{
                  'contents':contents
               },
               
         })
      }
   </script>
</head>
<body>
<template id="contents">
   <div>
        <ul>
          <li v-for="(item,index) in arr" @click=change(age[index])>{{item.name}}{{age[index]}}</li>
        </ul>
   </div>
</template>

<div id="div1">
    <contents :age="arr2"></contents>
</div>
</body>
</html>
    vue.js
    阅读 3.1k
    2 个回答
    得票最新
    头像
    asseek
      9.4k53148

      虽然不建议直接在子组件直接修改父组件的数据，但是你这个需求实现起来还挺简单的
      1.

      <li v-for="(item,index) in arr" @click=change(age[index])>{{item.name}}{{age[index]}}</li>

      改成

      <li v-for="(item,index) in arr" @click=change(index)>{{item.name}}{{age[index]}}</li>

      2.

      change(num){
    return num++; //这样不行
}

      改成

      change(index) {
  this.age.splice(index, 1, this.age[index] + 1)
}
      头像
      spike
        2482612

        首先您的数据存储方式很有问题，属于同一个对象的信息不应该分开放置，您大可以这样

        [
    {
        name: 'zhangsan',
        age: 43
    }
]

        这样只需将这个数组放在父组件，通过props传递给子组件
        子组件的click事件您可以这样子写

        <li v-for="(item,index) in arr" @click="$emit('change',index)")>{{item.name}}{{item.age}}</li>

        对应的在父组件进行接收

        <contents :arr="arr" @change="handleChange"></contents>

        此时handleChange会接受到index,对arr[index].age++即可

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题