vue3 子传父

Posted 2021-09-14 Power

父组件

<template>
  <div class="news-component">
    <p class="title">新闻页</p>
    <div class="news-detail-content">
    子组件：
      <news-detail :newList="newList" @addNew="receiveAddNew"  @delet="receiveDeleteNew"></news-detail>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from \'vue\';
import NewsDetail from \'@/components/newDetail.vue\';// 引入子组件
export default defineComponent({
  name: \'News\',
  components: {
    \'news-detail\': NewsDetail,
  },
  setup(props) {
    // 创建一个响应式的新闻列表
    const newList = reactive([
      { title: \'新闻1\', id: \'xw1\' },
      { title: \'新闻2\', id: \'xw2\' },
      { title: \'新闻3\', id: \'xw3\' },
    ]); 

    return {
      newList,
    };
  },

  methods: {
    /**
     * 接收（子组件）新增新闻数据
     * @param value 新增的新闻数据对象
     */
    receiveAddNew(value: any) {
      this.newList.push(value);
    },

    /**
     * 接收（子组件）删除新闻数据
     * @param index 被删除新闻的下标
     */
    receiveDeleteNew(index: number) {
      this.newList.splice(index, 1);
    },
  },
});
</script>

<style lang="less" scoped>
@import \'@/assets/css/variable.less\';
.news-component {
  width: 100%;
  height: 100%;
  .title {
    font-size: 40px;
    text-align: center;
  }
  .news-detail-content {
    width: 90%;
    height: 80%;
    margin: 0 auto;
  }
}
</style>

子组件

<template>
  <div class="news-component">
    <p>新闻详情组件</p>
    <br />
    渲染父组件传过来的数据：
    <p class="item-new"
          v-for="(item, index) in newList" 
          :key="item.id">
              {{ item.title }}---{{ item.id }} 
              <van-button type="warning" @click="deletNews(index)"> 删除 </van-button>
    </p>
    <br />
    <van-button type="info" @click="addNews">添加一条新闻</van-button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from \'vue\'; 
export default defineComponent({
  name: \'NewsDetail\',
  props: [\'newList\'],
  setup(props, { emit }) {  
  
    let addNews = () => {
      emit(\'addNew\', { title: `新闻${props.newList.length + 1}`, id: `xw${props.newList.length + 1}` });
    };
    let deletNews = (index: number) => {
      emit(\'delet\', index);
    };
    return {
      addNews,
      deletNews,
    };
  }
});
</script>

<style lang="less" scoped>
@import \'@/assets/css/variable.less\';
.news-component {
  width: 100%;
  height: 100%;
  background: rgba(201, 194, 194, 0.6);
  font-size: @default-fontSize;
  overflow: auto;
  .item-new {
    margin: 20px 0;
  }
}
</style>