vue实现列表的添加点击

下面是关于如何使用Vue实现列表的添加点击的完整攻略。为了使内容更加易懂，我将分为以下几个部分进行讲解：

1. Vue组件的创建
2. 列表的初始化
3. 实现添加点击功能

1. Vue组件的创建

首先，我们需要在Vue中创建一个组件用于显示列表，示例代码如下：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'List',
  props: {
    list: {
      type: Array,
      required: true
    }
  }
}
</script>

在这个组件中，我们使用了Vue的指令v-for来循环遍历列表，并且使用了Vue的props来接收一个名为list的数组作为参数展示。

2. 列表的初始化

接下来，我们需要在父组件中初始化列表。示例代码如下：

<template>
  <div>
    <list :list="list"></list>
  </div>
</template>

<script>
import List from './List.vue'

export default {
  name: 'App',
  components: {
    List
  },
  data () {
    return {
      list: ['apple', 'banana', 'pear']
    }
  }
}
</script>

在这个父组件中，我们通过引入前面创建的List组件，并且将列表数据传递给List组件，来实现了列表的初始化。

3. 实现添加点击功能

接下来，我们需要实现点击添加按钮后，向列表中添加新的数据的功能。示例代码如下：

<template>
  <div>
    <list :list="list"></list>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
import List from './List.vue'

export default {
  name: 'App',
  components: {
    List
  },
  data () {
    return {
      list: ['apple', 'banana', 'pear']
    }
  },
  methods: {
    addItem () {
      this.list.push('orange')
    }
  }
}
</script>

在这个代码中，我们通过在父组件中创建一个方法来实现添加新数据的功能。当用户点击"Add Item"按钮时，Vue会调用addItem方法，向列表中添加一个名为"orange"的新数据。同时，由于我们已经将列表数据传递给子组件List了，所以当数据发生变化时，List组件会自动更新页面中显示的列表内容，从而实现了点击添加按钮后的页面局部更新。

另外一个示例：

<template>
  <div>
    <list :list="list" @add="addItem"></list>
  </div>
</template>

<script>
import List from './Liist.vue'

export default {
  name: 'App',
  components: {
    List
  },
  data () {
    return {
      list: ['apple', 'banana', 'pear']
    }
  },
  methods: {
    addItem () {
      this.list.push('orange')
    }
  }
}
</script>

在这个示例中，我们通过在List组件中添加@click事件监听器来实现了点击子组件中的添加按钮后向父组件中传递指令的功能。当用户点击添加按钮时，List会触发一个名为"add"的事件，并且向父组件中传递一个addItem指令，从而实现了更加灵活的功能扩展。