vue传值（更新中）

父传子

父组件

<Top :list="list"></Top>

<script>
import Top from "@/components/Top";
export default {
  name: "App",
  components: { Top },
  data() {
    return {
      list: [
        { title: "页面1", url: "/" },
        { title: "页面2", url: "/page1" },
        { title: "页面3", url: "/page2" },
        { title: "页面4", url: "/page3" },
        { title: "页面5", url: "/page4" },
      ],
    };
  },
};
</script>

子组件

<template>
  <div>
    <router-link :to="item.url" v-for="item in list" :key="item.url" class="tab">
      <span>{{ item.title }}</span>
    </router-link>
  </div>
</template>
<script>
export default {
  name: "Top",
    props: ["list"],
};
</script>

子传父

父组件

<Side @add_menu_item="add_menu_item"></Side>

methods: {
    add_menu_item: function (item) {
      // alert(item);
    },
  },

子组件

this.$emit("add_menu_item", new_obj);

注意@add_menu_item和子组件$emit函数第一个参数保持一致！！！@add_menu_item=的名称和methods中的add_menu_item方法名一致！！！