鍍金池/ 問答/HTML/ vue子組件怎么操作父組件的數(shù)據(jù)？

vue子組件怎么操作父組件的數(shù)據(jù)？

每次點(diǎn)擊的時(shí)候讓對(duì)應(yīng)的年齡+1 這個(gè)年齡的值來自于父組件的數(shù)據(jù) 這個(gè)+1的操作應(yīng)該是在子組件還是寫在父組件里面(+1的操作不寫在標(biāo)簽內(nèi) 寫在父組件或者子組件內(nèi) 可以嗎?)

<!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>
回答
編輯回答
離殤

雖然不建議直接在子組件直接修改父組件的數(shù)據(jù)，但是你這個(gè)需求實(shí)現(xiàn)起來還挺簡單的
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)
}
2017年7月17日 07:33
編輯回答
哚蕾咪

首先您的數(shù)據(jù)存儲(chǔ)方式很有問題，屬于同一個(gè)對(duì)象的信息不應(yīng)該分開放置，您大可以這樣

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

這樣只需將這個(gè)數(shù)組放在父組件，通過props傳遞給子組件
子組件的click事件您可以這樣子寫

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

對(duì)應(yīng)的在父組件進(jìn)行接收

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

此時(shí)handleChange會(huì)接受到index,對(duì)arr[index].age++即可

2018年4月15日 19:54