在 vuejs 2 中将道具转换为数据属性

Posted 2023-02-16

【中文标题】在 vuejs 2 中将道具转换为数据属性

【英文标题】：Turn a prop into a data attribute in vuejs 2

【发布时间】：2017-02-14 13:07:18

【问题描述】：

我有一个简单的组件，由

<House :_people="['name': 'Kevin', 'name':'Bert', 'name': 'Timmy']"></House>

组件看起来像

<template>
<div class="house">
    <ul>
        <li v-for="person in people">
             person.name 
        </li>
    </ul>
    <a href="#add" @click="addMark">Add Mark</a>
</div>
</template>

<script>
export default 
    props: ['_people'],
    data: function()
        return 
            people: this._people
        
    ,
    methods: 
        addMark: function()
            this.people.push(
                name: 'Mark'
            );
        
    ,

问题是我必须将 json 有效负载传递给初始组件，但这会将有效负载设置为道具，而不是数据属性。当我尝试操纵道具时，它永远不会更新。所以我将 _people 属性映射到 people 属性。

这是个好主意吗？我在这里遗漏了一些明显的东西吗？

【参考方案1】：

传递一个对象作为道具：

people = 
  list: ['name': 'Kevin', 'name':'Bert', 'name': 'Timmy']


<House :_people="people"></House>

然后

props: ['_people'],
methods: 
  addMark() 
    this._people.list.push(
      name: 'Mark'
    )
  

【参考方案2】：

你可以使用计算属性：

export default 
    props: ['_people'],
    data() 
       return 
            added: false
       
    ,
    computed: 
        people() 
            var _arr = this._people.slice();

            return this.added ? _arr : _arr.push( name: 'Mark' );
        
    ,
    methods: 
        addMark: function()
            this.added = true
        
    ,