vue组件问题代码解答

使用vue的组件(爷子孙)实现下面的功能点击add以后把文本框的内容添加到下面的表格中,代码如何实现

看你画的样式应该是父子子

父组件

<template>
  <div>
    <vInput @on-add='add'></vInput>
    <subComp :list='list'><subComp>
  </div>
</template>

<script>
import vInput  from 'xxxxx'; //input组件
import subComp from 'xxxxx'; //列表组件
export default {
  components: {vInput ,  subComp },
  data() {
    return {
      list: []
    }
  },
  methods: {
    add(val) {
        this.list.push(val)
    }
  }
}
</script>

input组件

<template>
  <div>
     <input v-model='value' />
    <button @click='add'>添加</button>
  </div>
</template>

<script>
import vInput  from 'xxxxx'; //input组件
import subComp from 'xxxxx'; //列表组件
export default {
  components: {vInput ,  subComp },
  data() {
    return {
      value: []
    }
  },
  methods: {
    add(val) {
        this.$emit('on-add', value)
    }
  }
}
</script>

列表组件

<template>
  <div>
      <div v-for='item in list' :key='item>{{item}}</div>
  </div>
</template>

<script>

export default {
  prop: {
    list: Array
  },
 
  methods: {
  
  }
}
</script>

兄弟组件 通信 可以 用eventBus 或者 借助 共同的父组件（先 子传父 ，再父传子）

https://www.cnblogs.com/zhaoyingzhen/p/15244958.html

就这样一个页面，还要爷子孙，三层吗？不想多层传props，就用provide，inject