vue父子组件数据、方法

父组件

<template>
  <div>
      <navigationBar :listdata="list" :toIndex="Index"></navigationBar>
  </div>
</template>

父组件要传递的

  data() {
    return {
      list: [
        { name: "导航一", url: "/login" },
        { name: "导航二", url: "/login" },
        { name: "导航三", url: "/login" }
      ],
      index:"/index"
    };
  },
    methods: {
    Index: function() {
      console.log("方法执行");
      this.$router.push({ path: this.index });
    }
  }
};

子组件

<div class="imgBox">
      <img @click="toIndex" src="../assets/logo.png" />
    </div>
    <ul class="ul">
      <li v-for="item in listdata" :key="item.id" class="li" >{{item.name}}</li>
    </ul>

子组件接收

  props: ["listdata","toIndex"],

方法的传递方式二

//index页面父组件
<navigationBar @toIndex="Index('/index')"></navigationBar>

    Index: function(index) {
      console.log("方法执行");
      this.$router.push({ path: index });
    }


<img @click="myIndex" src="../assets/logo.png" />

 props: ["toIndex"],
  methods: {
    myIndex: function() {
      this.$emit('toIndex');
    },
 }