vue元件間通訊用例
阿新 • • 發佈:2018-12-12
父元件傳值給子元件 -- 以封裝公用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>