vue组件传值的11种方式总结

下面是对于“vue组件传值的11种方式总结”的详细讲解攻略：

1. props

• 父组件通过props向子组件传递数据。
• 子组件通过props接收传递过来的数据。

示例代码如下：

父组件：

<template>
  <ChildComponent :message="parentMessage"></ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  data() {
    return {
      parentMessage: 'Hello world'
    }
  },
  components: {
    ChildComponent
  }
}
</script>

子组件：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: {
    message: String
  }
}
</script>

2. provide/inject

• 父组件通过provide向子孙组件传递数据。
• 子孙组件通过inject获取传递过来的数据。

示例代码如下：

祖先组件：

<template>
  <ParentComponent></ParentComponent>
</template>
<script>
import ParentComponent from './ParentComponent.vue'
export default {
  provide: {
    message: 'Hello world'
  },
  components: {
    ParentComponent
  }
}
</script>

父组件：

<template>
  <ChildComponent></ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  }
}
</script>

子组件：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  inject: ['message']
}
</script>

3. $emit

• 子组件通过$emit向父组件传递数据。
• 父组件通过v-on监听子组件的事件，并接收传递过来的数据。

示例代码如下：

父组件：

<template>
  <ChildComponent @send-message="receiveMessage"></ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  methods: {
    receiveMessage(message) {
      console.log(message)
    }
  },
  components: {
    ChildComponent
  }
}
</script>

子组件：

<template>
  <button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('send-message', 'Hello world')
    }
  }
}
</script>

4. v-model

• 父组件通过v-model向子组件传递数据，并监听子组件的输入事件。
• 子组件通过$emit向父组件传递数据。

示例代码如下：

父组件：

<template>
  <ChildComponent v-model="message"></ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  data() {
    return {
      message: 'Hello world'
    }
  },
  components: {
    ChildComponent
  }
}
</script>

子组件：

<template>
  <input :value="value" @input="$emit('input', $event.target.value)">
</template>
<script>
export default {
  props: ['value']
}
</script>

5. $parent

• 子组件通过$parent访问父组件。
• 子组件通过$parent访问父组件的数据和方法。

示例代码如下：

父组件：

<template>
  <ChildComponent></ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  data() {
    return {
      message: 'Hello world'
    }
  },
  methods: {
    showMessage() {
      console.log(this.message)
    }
  },
  components: {
    ChildComponent
  }
}
</script>

子组件：

<template>
  <button @click="$parent.showMessage">Show Message</button>
</template>

6. $children

• 父组件通过$children访问子组件。
• 父组件通过$children访问子组件的数据和方法。

示例代码如下：

父组件：

<template>
  <div>
    <button @click="showMessage">Show Message</button>
    <ChildComponent ref="childComponent"></ChildComponent>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  methods: {
    showMessage() {
      console.log(this.$refs.childComponent.message)
    }
  },
  components: {
    ChildComponent
  }
}
</script>

子组件：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello world'
    }
  }
}
</script>

7. EventBus

• 父组件和子组件通过EventBus进行数据通信。

示例代码如下：

<!-- EventBus.js -->
import Vue from 'vue'
export default new Vue()

<!-- ParentComponent.vue -->
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
<script>
import EventBus from './EventBus.js'
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('send-message', 'Hello world')
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>
<script>
import EventBus from './EventBus.js'
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    EventBus.$on('send-message', message => {
      this.message = message
    })
  }
}
</script>

8. Vuex

• 父组件和子组件通过Vuex进行数据通信。

示例代码如下：

<!-- store.js -->
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
      state.message = message
    }
  },
  actions: {
    setMessage({ commit }, message) {
      commit('setMessage', message)
    }
  }
})

<!-- ParentComponent.vue -->
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions(['setMessage']),
    sendMessage() {
      this.setMessage('Hello world')
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['message'])
  }
}
</script>

9. $attrs/$listeners

• 子组件通过$attrs/$listeners访问父组件的属性和方法。

示例代码如下：

父组件：

<template>
  <ChildComponent message="Hello world" @click="showMessage"></ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  methods: {
    showMessage() {
      console.log('clicked')
    }
  },
  components: {
    ChildComponent
  }
}
</script>

子组件：

<template>
  <div>{{ $attrs.message }}</div>
  <button @click="$listeners.click">Click Me</button>
</template>

10. provide/inject + $attrs/$listeners

• 使用provide/inject和$attrs/$listeners结合可以实现祖先组件向后代组件传递数据，并访问后代组件的属性和方法。

示例代码如下：

祖先组件：

<template>
  <ParentComponent></ParentComponent>
</template>
<script>
import ParentComponent from './ParentComponent.vue'
export default {
  provide() {
    return {
      showMessage: this.showMessage
    }
  },
  methods: {
    showMessage() {
      console.log('clicked')
    }
  },
  components: {
    ParentComponent
  }
}
</script>

父组件：

<template>
  <ChildComponent></ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  }
}
</script>

子组件：

<template>
  <div>{{ $attrs.message }}</div>
  <button @click="$attrs.showMessage">Click Me</button>
</template>

11. render函数

• 使用render函数可以动态生成组件并传递数据。

示例代码如下：

<template>
  <div id="app"></div>
</template>
<script>
import Vue from 'vue'
new Vue({
  el: '#app',
  render(h) {
    return h('ChildComponent', {
      props: {
        message: 'Hello world'
      },
      on: {
        click: () => {
          console.log('clicked')
        }
      }
    })
  },
  components: {
    ChildComponent: {
      props: ['message'],
      render(h) {
        return h('div', this.message)
      }
    }
  }
})
</script>

以上就是关于“vue组件传值的11种方式总结”的详细攻略了，希望对你有所帮助。