vue组件间通信用例

父组件传值给子组件 -- 以封装公用slide组件为例

父组件

<template>

  <section class="banner">

    <slide :imgList="imgList" :options="swiperOption" width="100%" height="480"></slide>

  </section>

</template>

<script>

import Slide from "@/components/slide";

import img1 from "@/assets/1.jpg";

import img2 from "@/assets/2.jpg";

import img3 from "@/assets/3.jpg";

import img4 from "@/assets/4.jpg";

import img5 from "@/assets/5.jpg";

export default {

  data() {

    return {

      swiperOption: {

        // swipe官方的api所有参数都可以用

      },

      imgList: [img1, img2, img3, img4, img5]

    };

  },

  components: {

    Slide

  }

};

</script>

子组件

<template>

  <swiper :options="swiperOption">

    <swiper-slide v-for="(item, index) in imgList" :key="index">

      <img :src="item" :width="width" :height="height" alt>

    </swiper-slide>

    <!-- Optional controls -->

    <div class="swiper-pagination" slot="pagination"></div>

    <div class="swiper-button-prev" slot="button-prev"></div>

    <div class="swiper-button-next" slot="button-next"></div>

  </swiper>

</template>

<script>

import "swiper/dist/css/swiper.css";

import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {

  components: {

    swiper,

    swiperSlide

  },

  props: ["imgList", "options", "width", "height"],

  data() {

    return {

      swiperOption: {

        // 所有的参数同 swiper 官方 api 参数

        navigation: {

          nextEl: ".swiper-button-next",

          prevEl: ".swiper-button-prev"

        },

        // 分组模式

        // slidesPerView: 3,

        // spaceBetween: 30,

        // 是否循环

        loop: true,

        pagination: {

          el: ".swiper-pagination",

          clickable: true

        }

      }

    };

  },

  computed: {},

  created() {

    // 合并用户设置的参数

    this.swiperOption = Object.assign(this.swiperOption, this.options);

  },

  mounted() {

    // current swiper instance

    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了

    //console.log("this is current swiper instance object", this.swiper);

    // this.swiper.slideTo(3, 1000, false);

  }

};

</script>

<style lang='less'>

</style>

子组件传值给父组件

父组件

<template>

  <main>

    <section class="container thumb">

      <p class="lead">{{ msg }}</p>

      <thumb @listenToChildEvent="foo"></thumb>

    </section>

  </main>

</template>

<script>

import Thumb from "@/components/thumbnail";

export default {

  data() {

    return {

      msg: "子组件将要修改父组件的值"

    };

  },

  components: {

    Thumb

  },

  methods: {

    foo(data) {

      console.log(data);

      this.msg = data;

    }

  }

};

</script>

<style lang="less">

.thumb {

  margin-top: 20px;

}

</style>

子组件

<template>

  <div class="row">

    <div class="col-sm-6 col-md-3" v-for="(item, index) in 4" :key="index">

      <div class="thumbnail">

        <img src="@/assets/thumb.svg" alt="...">

        <div class="caption">

          <h3>Thumbnail label</h3>

          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vero vitae mollitia quos dolores ullam suscipit temporibus sed ex sapiente quisquam impedit nobis, consectetur sit, earum dolor aspernatur perspiciatis distinctio odio?</p>

          <p>

            <a href="javascript:;" @click="handleClick(index)" class="btn btn-primary" role="button">修改父组件的值</a>

          </p>

        </div>

      </div>

    </div>

  </div>

</template>

<script>

export default {

  methods: {

    handleClick(index) {

      console.log(index);

      this.$emit("listenToChildEvent", "我是第"+ (index + 1) +"个修改父组件值的按钮");

    }

  }

};

</script>

<style>

</style>

巴特西

vue组件间通信用例

父组件传值给子组件 -- 以封装公用slide组件为例

父组件

子组件

子组件传值给父组件

父组件

子组件

最新文章

热门文章