vue抽出组件并传值实例

使用父组件向子组件传值的方式

1,抽出的组件以及写法

2,注册使用的父组件以及传值,父组件return images

补充知识:vue如何抽取公共组件并全局注册

项目的抽象程度越高,代码修改起来就越方便,如何抽取一个公共的组件并且全局注册呢?

步骤

结构图

公共组件代码

<template>
 <img class="wordLook" :src="imgWifi" width="17%" @click="wifiBrightClick()" />
</template>
<script>
export default {
 data() {
  return {
   imgWifi: require("../../../public/all/wifi0.png"),
   intervalIdWifi: "",
   time: 0// 播放时间
   //countWifi:0 // 替换图片索引
  };
 },
 methods: {
  wifiBrightClick() {
   var vm=this;
   clearInterval(this.intervalIdWifi); //清除计时器
   vm.intervalIdWifi = null; //设置为null
   if(vm.time==0){
    vm.time=1
   }
   var wifiTime=vm.time*300

   var countWifi=0;
   vm.intervalIdWifi = setInterval(() => {
    if (countWifi == 0) {
     vm.imgWifi = require("../../../public/all/wifi1.png");
    }
    if (countWifi == 1) {
     vm.imgWifi = require("../../../public/all/wifi2.png");
    }
    if (countWifi == 2) {
     vm.imgWifi = require("../../../public/all/wifi3.png");
    }
    if (countWifi == 3) {
     vm.imgWifi = require("../../../public/all/wifi0.png");
    }
    if (countWifi >= 4) {
     clearInterval(vm.intervalIdWifi); //清除计时器
     vm.intervalIdWifi = null; //设置为null
     //vm.countWifi = 0;
    }
    countWifi++;
   }, wifiTime);
  }
 }
};
</script>
<style scoped>
.wordLook  {
   display: block;
   margin-top: 18%;
 margin-left: 40%;
   margin-bottom: 1%;
   text-align: center;
   font-size: 50px;
   font-family: serif;
   font-weight: bolder;
   color: rgb(85,  83,  83);
   font-family: -webkit-pictograph;
}
</style>

在js文件中注册

import wifiBrightComponent from './wifiBright.vue'

const wifiBright ={
    install:function(Vue){
      Vue.component('wifiBright',wifiBrightComponent)
    }

}
export default wifiBright

在main.js中全局挂载

import wifiBright from './components/wifiBrightComponents'

Vue.use(wifiBright)

实际应用

<wifiBright class="wifiLook" ref="wifiBright" @click.native="soundClick()" v-show="showImg"></wifiBright>

成功!

以上这篇vue抽出组件并传值实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2020-07-31

vue 进阶之实现父子组件间的传值

本章我们将深入了解一下组件,并实现父子组件间的传值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head&g

vue基本使用--refs获取组件或元素的实例

说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods 添加ref属性 <div id="app"> <h1 ref="h1Ele">这是H1</h1> <hello ref="ho">&l

Vue实现的父组件向子组件传值功能示例

本文实例讲述了Vue实现的父组件向子组件传值功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 父组件向子组件传值</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></scrip

深入理解Vue 组件之间传值

一.父组件向子组件传递数据 在 Vue 中,可以使用props向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组件获取 logo 的值,就需要使用props: ['logo'] 在 props 中添加了元素之后,就不需要在 data 中再添加变量了 父组件部分: 在调用组件的时候,使用 v-bind 将 logo 的值绑定为 App.vue 中定义的变量 logoMsg 然后就能将App.vue中 logoM

vue实现组件之间传值功能示例

本文实例讲述了vue实现组件之间传值功能.分享给大家供大家参考,具体如下: slot标签: 想向封装好结构的组件中插入内容,需要借助<slot></slot> 在组件之中进行关联:如 模板中: <slot name='txt'></slot> 组件调用中: <p slot='txt'></p> 注:如果只有slot上面每一定义name属性,则只能有一个slot <div class='box'> <com> &

vue2.0组件之间传值、通信的多种方式(干货)

Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.这次我们就来聊一聊vue2.0组件之间传值.通信的多种方式. 一.通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件.钩子函数等) this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B ②在B组件中获取A组件传递过来的参数 this.

vue组件之间数据传递的方法实例分析

本文实例分析了vue组件之间数据传递的方法.分享给大家供大家参考,具体如下: 1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sexVal = '男'  把该值传递给 子组件(B.vue),如下: App.vue <template> <div id="app"> <!--<router-view>&

vue组件之间的数据传递方法详解

(1)props属性: 在父组件中,可以通过子组件标签属性的形式将数据或者函数传给子组件,子组件通过props去读取父组件传过来的数据 用法 父组件传数据给子组件: 一般的属性值都是用来给子组件展示的 子组件传数据给父组件 属性值为函数类型的,一般是用来子组件向父组件传递数据,子组件通过调用父组件传过来的函数,可以修改父组件的状态数据 缺点: 隔层组件间传递: 必须逐层传递(麻烦) 兄弟组件间: 必须借助父组件(麻烦) 注意: //子组件获取父组件传过来的值 props: { obj: {//o

vue组件之间通信实例总结(点赞功能)

本文实例讲述了vue组件之间通信.分享给大家供大家参考,具体如下: 总结: 父组件-->子组件 ①通过属性 步骤1: <son myName="michael" myPhone='123'></son> <son :myName="userList[0]"></son> 步骤2: Vue.component('son',{ props:['myName','myPhone'] }) ②通过$parent 直接在子

解决vue组件props传值对象获取不到的问题

先说问题,父组件利用props向子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的** personal console 以下为原代码 1.home.vue(父组件)--personal是被传的参数 <!--子组件--> <form-picker class="form-picker" :personal="personal" > </form-picker> export default

vue组件之间通信方式实例总结【8种方式】

本文实例总结了vue组件之间通信方式.分享给大家供大家参考,具体如下: 对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的各种方式的总结,总共有8种方式. 1. props和$emit 父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过$emit触发事件来做到的. Vue.component('child',{ data(){ return { mymessage:this.message } }, template:` <div> <in

vue组件通信传值操作示例

本文实例讲述了vue组件通信传值操作.分享给大家供大家参考,具体如下: 父子组件通信: 子组件 <template> <div> <h3 @click="alerrt"> 我是子组件一</h3> <span>{{parentMessage}}</span> </div> </template> <script> export default{ props: ['parentMes

详解Vue组件之间通信的七种方式

使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下. 父子组件之间的通信 1)props和$emit 父组件通过props将数据下发给props,子组件通过$emit来触发自定义事件来通知父组件进行相应的操作 具体代码如下: ``` // 父组件 <template> <div> <h3>props和$emit</h3> <Children v-on:changeMsg="changeMsg"