vue 组件之间的常见的几种传值方式 |
您所在的位置：网站首页 › vue3组件传值方式及使用场景 › vue 组件之间的常见的几种传值方式 |
vue 组件之间的常见的几种传值方式
|
父组件向子组件传值，通过自定义属性的方式进行传值，在子组件中用 props 定义自定义属性，然后在父组件中通过 v-bind 指令把需要传递的数据绑定在子组件上，那在子组件中 props 里面的自定义属性可以直接使用 代码演示父组件代码 App 根组件 import Son from './components/Son.vue' export default { components: { Son }, data() { return { uname: 'JavaScript' } } } .app-container { padding: 1px 20px 20px; background-color: #efefef; } .box { display: flex; }子组件代码 Son 子组件 {{ sonName }} export default { props: { sonName: String } } .left-container { padding: 0 20px 20px; background-color: orange; min-height: 250px; flex: 1; }
子组件向父组件传数据使用自定义事件，vue 组件为我们提供了一个 $emit 方法，使用方式 (this.$emit('自定义事件名', 传递的数据))，子组件传递数据时，触发相应的事件函数，就会自动触发通过 $emit 给父组件绑定的自定义事件，自定义事件接收一个参数，参数就是子组件传递过来的数据 代码演示父组件代码 App 根组件 {{ perSay }} import Son from './components/Son.vue' export default { components: { Son }, data() { return { perSay: '' } }, methods: { valueFn(val) { this.perSay = val } } } .app-container { padding: 1px 20px 20px; background-color: #efefef; } .box { display: flex; }子组件代码 Son 子组件 点击向父组件传值 export default { data() { return { say: 'hello vue.js' } }, methods: { passFn() { this.$emit('pass-value', this.say) } } } .left-container { padding: 0 20px 20px; background-color: orange; min-height: 250px; flex: 1; }
兄弟组件之间的数据传递，通过 eventBus 来做中间的桥梁，传输方通过 Bus.$emit('自定义事件名', 数据)传数据，接收方通过 Bus.$on('自定义事件名', callback)接收数据，两者之间的自定义属性名保持一致 代码演示兄弟组件传输数据的桥梁(eventBus.js) import Vue from 'vue' export default new Vue()left 组件(传输方) Left 组件 点击向 Right 组件传值 import Bus from '@/EventBus.js' export default { data() { return { say: 'hello vue.js' } }, methods: { passFn() { Bus.$emit('pass-value', this.say) } } } .left-container { padding: 0 20px 20px; background-color: orange; min-height: 250px; flex: 1; }right 组件(接收方) Right 组件 {{ sibilingValue }} import Bus from '@/EventBus.js' export default { data() { return { sibilingValue: '' } }, created() { Bus.$on('pass-value', val => { this.sibilingValue = val }) } } .right-container { padding: 0 20px 20px; background-color: lightskyblue; min-height: 250px; flex: 1; }
通过 Vuex 存储数据，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理数据，以相应的规则保证状态以一种可预测的方式发生变化，一变全变，同步更新数据 代码演示Vuex — store/index.js import Vue from 'vue' import Vuex from 'vuex' // 注册 Vuex Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 100 }, mutations: { addCount(state, val = 1) { state.count += val }, subCount(state, val = 1) { state.count -= val } } }) export default store根组件 引入，注册，使用组件 App 根组件 import Left from './components/Left.vue' import Right from './components/Right.vue' export default { components: { Left, Right } } .app-container { padding: 1px 20px 20px; background-color: #efefef; } .box { display: flex; }left 子组件 Left 组件 -- {{ count }} +1 import { mapState } from 'vuex' export default { computed: { ...mapState(['count']) }, methods: { add() { this.$store.commit('addCount') } } } .left-container { padding: 0 20px 20px; background-color: orange; min-height: 250px; flex: 1; }right 子组件 Right 组件 -- {{ count }} -1 import { mapState } from 'vuex' export default { computed: { ...mapState(['count']) }, methods: { red() { this.$store.commit('subCount') } } } .right-container { padding: 0 20px 20px; background-color: lightskyblue; min-height: 250px; flex: 1; }
通过 v-model 双向数据绑定也可以实现组建之间的传值，v-model 除了能够绑定在 input 框上，也能绑定到组件上 // 等同于 代码演示父组件 App 根组件 import Son from './components/Son.vue' export default { components: { Son }, data() { return { say: 'hello vue.js' } } } .app-container { padding: 1px 20px 20px; background-color: #efefef; } .box { display: flex; }Son 子组件 Son 子组件 {{ value }} export default { props: { value: String } } .left-container { padding: 0 20px 20px; background-color: orange; min-height: 250px; flex: 1; }同理，子组件也可以向父组件传递数据
ref 引用可以作用在 h5 标签上，也可作用在组件标签上，作用在 h5 标签上是获取的是 DOM 对象， 作用在组件标签上，通过this.$refs获取的是组建实例对象 代码演示父组件 App 根组件 --- {{ value }} 点击拿数据 import Son from './components/Son.vue' export default { components: { Son }, data() { return { value: '' } }, methods: { refFn() { this.value = this.$refs.son.say } } } .app-container { padding: 1px 20px 20px; background-color: #efefef; } .box { display: flex; }Son 子组件 Son 子组件 export default { data() { return { say: 'hello vue.js' } } } .left-container { padding: 0 20px 20px; background-color: orange; min-height: 250px; flex: 1; }
这里只列举了 6 中传值方式，后面会多多补充 |
【本文地址】
今日新闻 |
推荐新闻 |