vue传值方式总结(十二种方法)
小开开 2021-04-30 10:42:47 2021-04-30 264 0
一.父传子传递
(1)在父组件的子组件标签上绑定一个属性,挂载要传输的变量
(2)在子组件中通过props来接受数据,props可以是数组也可以是对象,接受的数据可以直接使用 props: [“属性 名”] props:{属性名:数据类型}代码示例://父组件<template> <div> <i>父组件</i> <!--页面使用--> <son :data='name'></son> </div></template><script>import son from "./son.vue";//导入父组件export default { components: { son },//注册组件 name: "父组件", data() { return { name: "Frazier", //父组件定义变量 }; },};</script>
//子组件<template> <div>{{data}}</div></template><script>export default {components: { }, name: '子组件', props:["data"],};</script>
二.子传父传递
(1)在父组件的子组件标签上自定义一个事件,然后调用需要的方法
(2)在子组件的方法中通过 this.$emit(“事件”)来触发在父组件中定义的事件,数据是以参数的形式进行传递的代码示例://父组件<template> <div> <i>父组件</i> <!--页面使用--> <son @lcclick="lcclick"></son>//自定义一个事件 </div></template><script>import son from "./son.vue"; //导入父组件export default { components: { son }, //注册组件 name: "父组件", data() { return {}; }, methods: { lcclick(){ alert('子传父') } },};</script>
//子组件<template> <div> <button @click="lcalter">点我</button> </div></template><script>export default {components: { }, name: '子组件', methods: { lcalter(){ this.$emit('lcclick')//通过emit来触发事件 } },};</script>
三.兄弟组件通信(bus总线)
(1)在src中新建一个Bus.js的文件,然后导出一个空的vue实例
(2)在传输数据的一方引入Bus.js 然后通过Bus.e m i t ( “ 事 件 名 ” , " 参 数 " ) 来 来 派 发 事 件 , 数 据 是 以 emit(“事件名”,"参数")来来派发事件,数据是以emit()的参 数形式来传递
(3)在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})图片示例:四.ref/refs(父子组件通信)
(1)ref 如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例,
(2)可以通过实例直接调用组件的方法或访问数据。也算是子组件向父组件传值的一种代码示例://父组件<template> <div> <button @click="sayHello">sayHello</button> <child ref="childForRef"></child> </div></template><script>import child from './child.vue' export default { components: { child }, data () { return { childForRef: null, } }, mounted() { this.childForRef = this.$refs.childForRef; console.log(this.childForRef.name); }, methods: { sayHello() { this.childForRef.sayHello() } } }</script>
//子组件<template> <div>child 的内容</div></template><script>export default { data () { return { name: '我是 child', } }, methods: { sayHello () { console.log('hello'); alert('hello'); } }}</script>
五.Vuex通信
组件通过 dispatch 到 actions,actions 是异步操作,再 actions中通过 co