zoukankan      html  css  js  c++  java
  • vue实现非路由跳转以及数据传递

     

    定义一个父组件

    <template>
      <v-layout>
        <v-card contextual-style="dark" v-if="show">
          <span slot="header">
            一级主页面
          </span>
          <div slot="body">主内容页</div>
          <div slot="footer" :showDate="showDate">
            <div>来自主页面</div>
            <button type="button" class="btn btn-info " @click="toggle1">去子组件并传递数据</button>
          </div>
    
        </v-card>
        <v-card contextual-style="dark" v-else>
          <span slot="header">
            组件主页
          </span>
          <div slot="body">组件内容页</div>
          <div slot="footer">
            <div>来自组件页面</div>
            <my-button showDate="***父组件传递的数据***" @toggleEvent="toggle"></my-button>
          </div>
    
        </v-card>
    
      </v-layout>
    </template>
    
    <script>
    /* ============
     * Home Index Page
     * ============
     *
     * The home index page.
     */
    
    import VLayout from '@/layouts/Default';
    import VCard from '@/components/Card';
    import MyButton from '@/components/MyButton';
    
    export default {
      /**
       * The name of the page.
       */
      name: 'home-index',
      data() {
        return {
          show: true,
          showDate: "父子间传过来的数据"
        }
      },
      methods: {
        toggle1(){
    this.show =false;
        },
        toggle(data) {
          console.log(data)
          this.show = data;
        }
      },
      mounted() {
        // this.toggle();
      },
      /**
       * The components that the page can use.
       */
      components: {
        VLayout,
        VCard,
        MyButton
      },
    };
    </script>

    再定义一个子组件

    <template>
        <div>
            <div slot="body">{{showDate}}</div>
            <button type="button" class="btn btn-danger " @click="toggle1">去父组件</button>
        </div>
    </template>
    <script>
    export default {
        props: ["showDate"],
        methods: {
            toggle1() {
                this.$emit('toggleEvent', "false")
            }
        }
    
    }
    </script>

    将父组件的数据通过porps传递到子组件,子组件通过this.$emit(‘触发的事件函数’,要传输的数据)

    就目前来说(组件之间传递数据共有三种方法):

    1.通过父子组件之间的通信

    2.通过vuex

    3.通过路由传参

    要说的就这么多,晚安~~~

  • 相关阅读:
    [HAOI2015]树上染色 [树形dp]
    【luogu1052】 过河 [动态规划]
    【luogu4819】 [中山市选]杀人游戏 [tarjan 缩点]
    【luogu4185】 [USACO18JAN]MooTube [并查集]
    [国家集训队]墨墨的等式 [差分约束]
    【RMQ】
    [USACO05DEC] 布局 [差分约束]
    [SCOI2011]糖果 [差分约束]
    【POJ 1201】Intervals
    【luogu1993】 小K的农场 [差分约束]
  • 原文地址:https://www.cnblogs.com/xkloveme/p/7533856.html
Copyright © 2011-2022 走看看