Vue中子传父通讯实现颜色换行添加删除

冷酷吗喽

于 2024-06-18 11:58:58 发布

阅读量397

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_72189003/article/details/139769222

如图：列表是写在父组件中，input框和按钮是写在子组件中的

按照以上示例图有这两个文件

父组件中：AboutView.vue

<template>
  <div class="about">
    <!-- <h1>This is an about page</h1> -->
    <!-- <ul v-for="(item,index) in arr" :key="index">
      <li :class="index%2==0?'box':''">{
  
  {item}}</li>
     
    </ul>
    <hr> -->
    <ul>
    <li v-for="(item,index) in arr" :key="index">
      <span v-color="index">{
  
  {item}}</span>
      <button @click="shanchu(index)">删除</button>
    </li>
    </ul>
<!-- 组件之间进行添加 -->
		<HelloWorld @fuzujian ="name">
      
    </HelloWorld>
  </di