vue组件传值的十种方式

一、props

父传子

子组件

// 第一种数组方式
props: [xxx, xxx, xxx]
// 第二种对象方式
props: { xxx: Number, xxx: String}
// 第三种对象嵌套对象方式
//第三种对象默认支持 4 种属性，并且都是非必填的。可以随意使用
props: {xxx: {//类型不匹配会警告type: Number,default: 0,required: true,// 返回值不是 true,会警告validator(val) { return val === 10}}
}

父组件

// 第一种静态属性传参
// 注意：// 1.在不定义 props 类型的情况下 props 接受到的均为 String。// 2.当 props 属性指定为 Boolean 时，并且只有属性 key 没有值 value 时接受到的是 true<!--props 接受到的均为 String -->
<children xxx="123"></children><!-- 有只有属性没有值, 这种情况 props 指定类型是 Boolean 则接收到的是 true -->
<children xxx></children>

// 第二种动态属性传参// 注意：// 1.需要区分非简写形式传入的值是对象，则会对应 props 中多个值// 2.会保留传入值的类型// 3.如果是表达式则获取到的是表达式的计算结果
<!-- prop 接收到 Number 类型的 123-->
<children :xxx="123"></children><!-- prop 接收到 Array 类型的 [1, 2, 3]-->
<children v-bind:xxx="[1, 2, 3]"></children><!-- prop 会接收到 xxx1 和 xxx2 俩个参数。这种不支持简写形式-->
<children v-bind="{xxx1: 1, xxx2: 2}"></children>

二、$emit-- $on

子传父

子组件

<template><div>子组件:<span>{{childValue}}</span><!-- 定义一个子组件传值的方法 --><input type="button" value="点击触发" @click="childClick"></div>
</template>
<script>export default {data () {return {evidence: '我是子组件的数据'}},methods: {childClick () {// childByValue是在父组件on监听的方法// 第二个参数this.childValue是需要传的值this.$emit("materials", this.evidence); //触发 input 事件，并传入新值}}}
</script>

父组件

<template><div>父组件:<span>{{name}}</span><br><br><!-- 引入子组件 定义一个on的方法监听子组件的状态--><child  :third="third"@materials="getMaterials"></child></div>
</template>
<script>import child from './child'export default {components: {child},data () {return {name: ''}},methods: {getMaterials(evidence) {// childValue就是子组件传过来的值this.name = evidence}}}
</script>

三、公共仓库bus.js

非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果

公共bus.js

//bus.js
import Vue from 'vue'
export default new Vue()

组件A（传值的页面）

<template><div>A组件:<span>{{elementValue}}</span><input type="button" value="点击触发" @click="elementByValue"></div>
</template>
<script>// 引入公共的bug，来做为中间传达的工具import Bus from './bus.js'export default {data () {return {elementValue: 4}},methods: {elementByValue () {Bus.$emit('val', this.elementValue)}}}
</script>

组件B （接收值的页面）

<template><div>B组件:<input type="button" value="点击触发" @click="getData"><span>{{name}}</span></div>
</template>
<script>import Bus from './bus.js'export default {data () {return {name: 0}},mounted () {// 用$on事件来接收参数Bus.$on('val', elementValue => {console.log(elementValue)vm.name = elementValue})},methods: {getData () {this.name++}}}
</script>

四、vuex

五、v-model

父组件

// 引入子组件
// 写法 1
<plaintiff    v-model="activeName_copy"></plaintiff >// 写法 2
<plaintiff  :activeName_copy="activeName_copy" @update:activeName_copy="activeName_copy= $event"></plaintiff>// 写法 3
// 1. 事件名必须是 update: + 属性名
// 2. 参数不能是表达式，最好是 data 里面的属性
<plaintiff    :activeName_copy.sync="activeName_copy"></plaintiff>data(){return{activeName_copy: "first",}
}

子组件

props: ['activeName_copy],
data(){return{activeName: this.activeName_copy,}
}
methods:{aa(){this.activeName = 'fifth'this.$emit('update:activeName_copy', this.activeName) //触发 input 事件，并传入新值}
}

六、project / inject

<!--父组件 提供-->
{project() {return {parent: this.test}},data(){return{test:true}}
}
<!--子组件 注入-->
{// 写法一inject: ['parent']// 写法二inject: { parent: 'parent' }// 写法三inject: {parent: {from: 'parent',default: 222}}
}

七、$refs和ref

八、$root

九、 $parent 和 $children （但是在实际中 $parent用的非常少——考虑到耦合度的原因）

$root 获取根组件
$parent 获取父组件—父传子
$children 获取子组件(所有的子组件，不保证顺序)-----子传父
$refs 组件获取组件实例，元素获取元素

十、插槽

十一、$attrs 和 $listeners

vue组件传值的十种方式相关推荐

vue组件传值方式有哪些
Vue 作为一个轻量级的前端框架,核心两大特性就是响应式编程和组件化. 本文针对组件之间传值做详细讲解. Vue就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是 ...
Vue.js 父子组件通信的十种方式；告诉世界前端也能做 AI；你可能不知道的14个JavaScript调试技巧...
记得点击文章末尾的"阅读原文"查看哟~ 下面先一起看下本周的摘要吧~ 想了解老用户如何参与阿里云双十一1折拼团特惠主机的,可以看第二条推送,文中提供了两种方法~,一起看看本周有哪些 ...
vue组件传值的11种方式
不写这篇文章,我自己都不知道我知道的vue组件传值的方式竟然有11种之多,其实静下来想想,常用的也有五六种,先上一张总结图: 1.父组件传给子组件在子组件里定义一个props,即props:['ms ...
【vue】vue组件传值的三种方式
前言 vue的组件传值分为三种方式:父传子.子传父.非父子组件传值引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递父组件通过 prop 给子组件下发数据,子组件通过事件 ...
vue组件间通信六种方式
vue组件间通信六种方式组件之间的传值通信组件之间的通讯分为三种:父传子.子传父.兄弟之间的通讯: props/$emit 父传子:主要是通过props来实现的具体实现:父组件通过import引 ...
41. Vue组件传值-父组件向子组件传值
前言前面写了组件的创建.切换等等篇章,主要讲述了组件自身如何在父组件app中如何渲染使用.这里存在一个问题,就是父组件的数据如何传递到子组件中. 这是一个很常见的情况,如果是jQuery那么都是直接 ...
【Vue组件传值】不同的组件之间的数据传值方法
不同的组件之间的数据传值方法父组件向子孙组件传值.通过方法provide / inject (1)provide/inject的介绍: provide/ inject 是vue2.2.0新增的api ...
Vue组件传值的三种方法
Vue组件传值的三种方式 1.父传子父传子使用props: 1.父组件:即在使用的子组件标签上,自定义一个绑定数据,这里我使用的是"mymsg",将父组件的msg绑定在其上. 2 ...
Vue组件传值存在的弊端-Vuex状态管理
以下内容纯属个人理解,旨在记录和分享. 导入使用Vue组件传值,可以实现父子组件之间的数据交换.但实际上,在应用过程中仍然存在很多不便之处: 当存在多层组件嵌套时,组件之间的传值将会变得极度麻烦和繁 ...

vue组件传值的十种方式

vue组件传值的十种方式

一、props

二、$emit-- $on

三、公共仓库bus.js

四、vuex

五、v-model

六、project / inject

七、$refs和ref

八、$root

九、 $parent 和 $children （但是在实际中 $parent用的非常少——考虑到耦合度的原因）

十、插槽

十一、$attrs 和 $listeners

vue组件传值的十种方式相关推荐

最新文章

热门文章