vue组件之间传值(详细版)

在vue实际开发中，经常会碰到组件之间传值的需求，特此记录

父向子组件传值（向下传值）

父组件

<template> <div id="father"><children msg="hello"></children> <!--传递字符串--><children :msg="msg"></children>    <!--传递动态属性--></div>
</template>
<script>
export default {name: "Father",components: {children},data() {return {msg: 'hello'}}
}
</script>

子组件

<template> <div id="children">{{msg}}</div>
</template>
<script>
export default {name: "Children",props:['msg'],watch: {// 动态属性可以监听器进行监听msg(newVal) {console.log(newVal);}},
}
</script>

子向父组件传值（向上传值）

子组件

<template> <!--  在子组件的某一个事件内部，通过this.$emit('自定义的事件'，传递的参数) 传递值给父组件。 --><div id="children"><input type="button" value="发送数据" @click='sendData'></div>
</template>
<script>
export default {name: "Children",data() {return {msg: 'hello'}},methods: {  // 触发点击事件sendData() {this.$emit('childSend', this.msg)} }
}
</script>

父组件

<template> <!-- 父组件在调用了子组件的地方，绑定一个自定义事件（childSend）, 事件的定义由父组件实现。在实现的拥有默认的参数（val），值就是子组件传递给父组件的值--><div id="father"><children @childSend="fatherGet"></children></div>
</template>
<script>
export default {name: "Father",components: {children},methods: {fatherGet(value) {console.log(value);}}
}
</script>

兄弟组件传值的两种方法

第一种办法
通过事件总线bus传值

在main.js里首先声明

Vue.prototype.$bus=new Vue();

父组件

<template><div id="father"><children-1></children-1><children-2></children-2></div>
</template><script>
export default {components:{children-1,children-2},
}
</script>

子组件1

<template><div class="children-1"><div><input type="button" value="发送数据" @click='sendData'/></div></div>
</template>
<script>
export default {name: "Children-1",data() {return {msg: 'hello'}},methods: {  // 触发点击事件sendData() {this.$bus.$emit('childSend', this.msg)} }
}
</script>

子组件2

<template><div class="children-2"><div>{{msg}}</div></div>
</template>
<script>
export default {name: "Children-2",data() {return {msg: ''}},mounted(){this.$bus.$on('childSend',(value)=>{console.log(value);this.msg = value})}
}
</script>

第二种方法
通过父组件在中间做中间件，相互传值（子组件1传值给父组件，父组件传值给子组件2）

子组件1

<template><div class="children-1"><div><input type="button" value="发送数据" @click='sendData'/></div></div>
</template>
<script>
export default {name: "Children-1",data() {return {msg: 'hello'}},methods: {  // 触发点击事件sendData() {this.$emit('childSend', this.msg)} }
}
</script>

父组件

<template><div id="father"><children-1 @childSend="fatherGet"></children-1> //父组件接收值<children-2 :msg="msg"></children-2>            //向子组件2传值</div>
</template><script>
export default {components:{children-1,children-2},data(){return {msg:'',}},methods: {fatherGet(value) {this.msg = valueconsole.log(value);}}
}
</script>

子组件2

<template><div class="children-2"><div>{{msg}}</div></div>
</template>
<script>
export default {name: "Children-2",props:['msg'],watch: {// 动态属性可以监听器进行监听msg(newVal) {console.log(newVal);}}
}
</script>

vue组件之间传值(详细版)相关推荐

vue组件之间传值方式方法---实战面试篇
vue组件之间传值方式方法 vue组件传值 vue组件化什么是组件化? vue组件通讯父组件向子组件传值子组件向父组件传值兄弟组件传值总结 vue组件传值最近准备面试跳槽.说到前端面试,有 ...
深入理解Vue 组件之间传值
一.父组件向子组件传递数据在 Vue 中,可以使用props向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组 ...
Vue组件之间传值的几种方法 (直接上代码)
vue组件之间传值的几种方法总结一. props(父传子) 父组件传递 <template><div><HelloWorld :msg="msg" ...
vue组件之间传值几种方法
方法一.父子组件传值通过props向下传递父组件 <div class="menu_header"><Menu :msgChild="msg1&qu ...
vue 组件之间传值父转子，子传父，同级别之间的传参，跨级别传参
写这篇文章之前,我对vue组件之间的传值,还是只知道一些基础的传值方式.虽然工作中勉强能够应对,但是想要行云流水感觉还是心有余而力不足,所以在此,我想总结一下vue组件之间的一些传值方式供大家参考,同 ...
vue组件之间传值的几种方式
vue组件传值父子组件之间传值.几种常见方式第一种方式(父传子) 父组件 <m-child :childMsg="parentMsg"></m-child&g ...
（学习总结）vue组件之间传值方式
最基础的父子组件之间传值,父组件传值给子组件需要把值传出的组件<组件名 :接收值的变量="传出值"></组件名>接收值的组件data(){}props:[ ...
Vue组件之间传值/调用方法的几种方式
组件之间传值/调用方法的几种方式 (一)父组件向子组件传值==props 1.在父组件中使用子组件的地方绑定数据 <children :message="message"&g ...
Vue 组件之间传值(传递数据)的5种方法 (七)
文章目录一.父传子(父组件向子组件传递数据) 二.子传父(子组件向父组件中传递数据) 三.兄弟组件之间的传值四.总线传值五.通过Vuex这个仓库,进行数据交互(后面会讲) 一.父传子(父组件向子 ...

vue组件之间传值(详细版)

父向子组件传值（向下传值）

子向父组件传值（向上传值）

兄弟组件传值的两种方法

vue组件之间传值(详细版)相关推荐

最新文章

热门文章