Vue.js中如何从div向单页面组件传递参数？

这事儿其实挺简单的，咱们一步步来搞定它：

1. 先修改页面中的DOM元素 #

首先在你的页面div上添加自定义属性，推荐用HTML5规范的data-*属性（当然你坚持用page属性也没问题，但data-*更符合标准）：

<div id="contact-us" class="section md-padding bg-grey">
  <div id="contact" data-page="main"></div> <!-- 这里加data-page属性 -->
  <script src="/dist/build.js"></script>
</div>

2. 在main.js中获取参数并传递给组件 #

接下来在你的入口文件里，先拿到这个属性的值，然后通过props把它传给Contact组件——这是Vue组件间传值最规范的方式：

import Vue from 'vue'
import Contact from './Contact.vue'

// 获取页面元素上的page参数
const contactElement = document.getElementById('contact')
// 如果用的是page属性就换成 contactElement.getAttribute('page')
const currentPage = contactElement.getAttribute('data-page')

new Vue({
  el: '#contact',
  render: h => h(Contact, {
    props: {
      page: currentPage // 把参数作为props传递给组件
    }
  })
})

3. 在Contact.vue组件中接收并使用参数 #

最后在你的组件里定义props，就能拿到这个页面参数了：

<template>
  <div class="contact-component">
    <!-- 在模板里直接使用 -->
    <p>当前组件所在页面：{{ page }}</p>
  </div>
</template>

<script>
export default {
  // 定义props接收参数
  props: {
    page: {
      type: String,
      required: true, // 可以根据需求设置是否必填
      default: 'unknown' // 可选：设置默认值
    }
  },
  mounted() {
    // 在脚本里也能访问
    console.log('组件加载于页面：', this.page)
  }
}
</script>

补充说明 #

如果你不想用props（不推荐，因为会增加组件和DOM的耦合），也可以在Contact组件内部直接获取DOM元素的属性，比如在mounted钩子中：

mounted() {
  const page = document.getElementById('contact').getAttribute('data-page')
  console.log('当前页面：', page)
}

但这种方式不如props灵活，也不符合Vue的组件化设计思想，所以优先推荐props的方案。

内容的提问来源于stack exchange，提问作者Den