vue向ifarm传值_vue组件间传值

目前流行组件化开发，vue组件间传值是一个非常常用的功能，有时候仅仅是父子和兄弟之间简单的传值，我们就没有必要直接引入vuex来进行管理。

# 1.父子间传值

## 1.1 子组件向父组件传值

子组件通过触发事件给父组件的方式进行传值

我们先来看一个右侧划出分享链接的例子。

首先我们来看一下需求，我们需要点击按钮后，右侧出现一个弹窗。先创建一下基本的页面。

我们可以调用内建的 $emit 方法并传入事件的名字，来向父级组件触发一个事件：

然后我们写一下右侧划出的组件的样式

  <template><div class="wrapper"><span class="title">文件转发</span><hr><div class="share-file"><div class="share-file-option"><span class="share-file-option-text">转发形式：</span><VRadioGroupv-model="radioGroup":disabled="isCreate"class="share-file-option-radio"><VRadio:label="`不加密任何人访问链接即可查看、下载`":value="0"/><VRadio:label="`输入提取密码才能查看、下载，更加私密安全`":value="1"/></VRadioGroup></div><div class="secret"><div class="secret-expire"><span class="secret-expire-text">有效期：</span><span class="secret-expire-text-day">&nbsp;7天过后即失效</span><VBtncolor="#2F9AFF"class="secret-expire-link-button":style="canCreate"@click="handleCreateLink">创建链接</VBtn></div><divv-if="isCreate"class="share-info"><div class="link-wrapper"><div class="secret-qcode"><!-- <imgsrc="https://i.loli.net/2018/12/20/5c1b2a3dc2f67.png"alt=""> --><VueQRCodeComponent:size="size":text="qrCode"class="secret-qcode-content"/></div><p class="secret-copy-text">分享链接已复制</p><p class="secret-copy-text-info">通过QQ、微信、微博、QQ空间转发给好友吧</p></div><div class="share-link"><inputclass="share-link-input"type="text":placeholder="this.qrCode!==''?this.qrCode: '百度一下，你就知道...7天有效'"><divv-clipboard:copy="qrCode"v-clipboard:success="onCopy"class="share-link-copy">复制链接</div></div></div></div><divv-if="radioGroup === 1 && isCreate === true"class="share-info-wrapper"><div class="share-info-wrapper-pass"><span class="share-info-wrapper-text">提取密码：</span><inputv-model="fileKey"type="text"class="share-info-wrapper-input"></div><CancelButtonclass="share-info-wrapper-cancel-btn"@click="handleCancel"/></div><CancelButtonv-if="radioGroup !== 1 || isCreate===false"class="share-info-wrapper-cancel-btn cancelBtn"@click="handleCancel"/></div></div>
</template>

然后我们在父组件中注册FileShare这个组件

  import FileShare from '@/demo/FilePreview'export default {components: {FileShare}}<v-btn color="info" class="click-button">点我</v-btn><FileShare/>

然后就可以看到这个刚刚引入的组件了。

分享组件

现在我们需要通过点击'点我'按钮，使这个组件出现。我们首先要给组件一个判断是否出现的状态。

data

我们通过按钮的点击事件，将canShow变为true，让组件出现

handleClick

我们的需求是点击子组件的取消按钮，将父组件中的canShow变为false，我们需要通过自定义事件来实现。

我们先给子组件绑定自定义事件'handleSlide'

接着，在子组件'取消’按钮的事件中，加下如下代码

handleCancel

然后再父组件中定义handleSlide事件：

handleSlide

当我们点击取消按钮后，子组件会消失，同时我们可以从控制台接收到刚刚在子组件传过来的'close'.

接收到的事件的值

## 1.2 父组件向子组件传值

父组件通过prop向子组件传值，Prop是你可以在组件上注册的一些自定义特性。当一个值传递给一个prop特性的时候，它就变成了那个组件实例的一个属性。一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。

我们通过一个自制button组件的方式来了解这一特性。

  <template><button class="g-button" :class="{[`icon-${iconposition}`]:true}"@click="$emit('click')"><!-- <svg v-if="icon" class="icon"><use :xlink:href="`#i-${icon}`"></use></svg> --><g-icon class="icon" v-if="icon && !loading" :name="icon"></g-icon><g-icon class="loading icon" v-if="loading" name="loading"></g-icon><div class="content"><slot></slot></div></button>
</template>
<script>
import Vue from 'vue'
import Icon from './icon'
Vue.component('g-icon', Icon)
export default {}
</script>
<style lang="scss" scoped>
@keyframes spin {0% { transform: rotate(0deg);}100% {transform: rotate(360deg);}
}
.g-button{font-size: var(--font-size);height: var(--button-height);padding: 0 1em;font:inherit;border-radius: var(--button-radius);border: 1px solid var(--border-color);background: var(--button-bg);display: inline-flex;justify-content: center;align-items: center;vertical-align: middle;&:hover{border-color: var(--border-color-hover);}&:hover{background-color: var(--button-active-bg);}&:focus{outline: none;}>.content{order:2;}>.icon {order:1;margin-right: .1em;}&.icon-right {> .icon{order:2;margin-left: .1em;margin-right:0;}>.content{order:1;}}.loading {animation: spin 2s infinite linear;}}
</style>
我们在引用组件后，向组件传递各种想要传递的值，如下代码：<div class="box"><g-button icon="setting">love js</g-button><g-buttonicon="setting":loading="isLoading"@click="isLoading = !isLoading">js love</g-button><g-button icon="setting" iconposition="right">love js</g-button><g-button-group><g-button icon="left" iconposition="left">上一步 </g-button><g-button>more</g-button><g-button icon="right" iconposition="right">下一步</g-button></g-button-group></div>

然后，我们需要在子组件button中通过定义props来接受父组件传过来的值(可以定义props的默认值，类型以及validator来避免传过来的脏数据或者其他报错)

export default {props: {icon:{},loading: {type: Boolean,default: false},iconposition:{type: String,default: 'left',validator (value) {return value === 'left' || value === 'right'}}}
}

最终我们可以看到传过去值以后，button的变化：

button

# 2.兄弟组件传值

兄弟组件传值一般通过创建一个新的vue实例，然后通过这个vue实例进行事件的传递，通常也被称为事件总线。方法很简单，首先创建一个全局的Vue实例，然后某个组件提交一个‘事件1',另一个组件监听一下'事件1'.

我们首先创建搜索框和搜索选项两个组件

搜索框组件和搜索选项组件

搜索框

搜索选项

然后我们需要新建一个全局的vue实例

import

然后在搜索信息组件和搜索框组件中引用这个vue实例。

在搜索信息组件中我们给开始时间和结束时间绑定了change事件，在值发生变化后，通过eventVue事件触发方式，将值传递出去

 import eventVue from '@/apis/eventVue'export default {data () {return {startDate: '',endDate: ''}}methods: {handleStartChange () {console.log('传递出去开始时间')if (this.startDate !== '') {eventVue.$emit('changeStart', formatDate(this.startDate))}},handleEndChange () {console.log('传递出去结束时间')if (this.startDate !== '') {eventVue.$emit('changeEnd', formatDate(this.endDate))}},}
}

然后我们在搜索框组件中来接收这些事件（在按下搜索按钮后接收），首先我们先要定义一下接收的值，同时也要引用一下eventVue实例。

 import eventVue from '@/apis/eventVue'
export default {data () {return {startDate: '',endDate: ''}},methods: {handleSearch () {eventVue.$on('changeStart', (date) => {this.startDate = date}})eventVue.$on('changeEnd', (date) => {this.endDate = date})console.log('刚刚接收到的开始时间')console.log(this.startDate)console.log('刚刚接收到的结束时间')console.log(this.endDate)}}
}

传递和接收的值

vue向ifarm传值_vue组件间传值相关推荐

wepy组件子父传值_wepy组件间传值
普通组件引用当页面需要引入组件,或组件需要引入子组件时,必须在.wpy文件的 import wepy from 'wepy'; import Child from '../components/ch ...
使用vuex对兄弟组件传值_Vue 组件之间传值(父子组件传值，vuex传值)
父子组件传值在父组件中改变子组件里的数据 //父组件点击事件 clickFunc(){//若更新子组件里a的值 this.$refs.son.a = 'xx';//若调用子组件里b方法 this.$ ...
六十三、Vue中非父子(兄弟)组件间传值，插槽的使用和作用域插槽（非常重要）
2020/10/18 . 周日.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/18 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
vue 组件间传值、兄弟组件、bus方式 ( 1 分钟看懂 )
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. bus方式的组件间传值其实就是建立一个公共的js文件,专门用来传递消息 1.建立公共文件,并引入新 ...
vue项目原理分析-1：组件间传值
整个项目目录(create project后) vue.config.js的配置 // vue.config.js 常⽤配置 module.exports = {devServer:{port:333 ...
Vue组件间传值详解
文章目录 1. 父组件向子组件传值 1.1 描述 1.2 props接收数据: 2. 子组件向父组件传值 3. 兄弟组件间传值 4. 事件总线 5. Ref 6. root/parent/childr ...
vue组件间传值的六种方法
一. vue组件间传值 1. 父组件向子组件进行传值props 父组件代码: <template><div>父组件:<input type="text" ...
vue组件间传值: 父传子、子传父、非父子组件传值
父组件向子组件传值 // 父组件通过属性将值传递给子组件 <template><div><closePopup :optionsID="optionsID&qu ...
组件间数据交互——父组件向子组件传值（ props属性值类型）子组件向父组件传值-携带参数 || 非父子组件间传值
父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

vue向ifarm传值_vue组件间传值

vue向ifarm传值_vue组件间传值相关推荐

最新文章

热门文章