Javascript 如何访问vue组件的数据属性

我是Vue.js的新手，我觉得它很棒。我的任务是开始在我们的非greenfield web应用程序中实现一些vue组件，我想我应该首先实现一些自包含的“小部件”，它们必须在我的rails应用程序中大量处理状态

作为一个自包含的组件，它的工作非常好，但是我想用一个数据属性加载它，以便组件知道它需要处理什么。我的Vue文件看起来像（出于IP方面的考虑，我已经编辑了部分内容）：

在我的html.erb代码中，我创建了以下组件：

<div id="bs" policy="2">
    <fi_dis data-b-id="1"></fi_dis>
    <fi_dis data-b-id="2"></fi_dis>
</div>

这一切工作完美无瑕，并完全符合我想要它做的，除了一件事。我希望访问组件的已创建函数中的data-b-id属性（即，将上面ajax调用的url中的数字“2”替换为该属性的值）。这样，我希望组件能够处理我选择的任何“fi_dis”，只需在我希望它处理的数据属性中指定b-id即可

---

如何实现这一点？

您可以将数据值从父组件传递到子组件

例如，您应该定义允许组件接收的道具：

import FiDis from '../components/fi_dis.vue'
Vue.component('fi_dis', FiDis);
document.addEventListener('turbolinks:load', () => {
  const fi_dis = new Vue({
    el: '#bs',
    components: { FiDis },
    props['bId'],
    created() { // This is a lifecycle method
        this.printPropertyValue();
    },
    methods: {
        // Your custom methods goes here separeted by commas
        printPropertyValue() {
            console.log(this.bId);
        }
    }
  })
});

用于从组件实现传递数据的sintax使用

v-bind:propertyName

或

：propertyName

（简写）

如果没有“父”组件怎么办？它不应该是props:['bId']？您怎么没有父组件？v-bind允许您设置javascript变量，这样您就可以完美地更改

v-bind:data-b-id=“databinid”

。好的，这是可行的，但是如何在创建的事件上下文中访问该变量呢？（我可以在调试器中看到它，但我称它为错误的或未定义的）。在这种情况下，

是

内部的自定义组件，因此它是主组件的子组件。我会帮你自己一个大忙，将所有ajaxing从组件中分离出来，至少将其移动到一个单独的模块中

<div id="bs" policy="2">
    <fi_dis data-b-id="1"></fi_dis>
    <fi_dis data-b-id="2"></fi_dis>
</div>

import FiDis from '../components/fi_dis.vue'
Vue.component('fi_dis', FiDis);
document.addEventListener('turbolinks:load', () => {
  const fi_dis = new Vue({
    el: '#bs',
    components: { FiDis },
    props['bId'],
    created() { // This is a lifecycle method
        this.printPropertyValue();
    },
    methods: {
        // Your custom methods goes here separeted by commas
        printPropertyValue() {
            console.log(this.bId);
        }
    }
  })
});

<div id="bs" policy="2">
    <fi_dis :bId="1"></fi_dis>
    <fi_dis :bId="2"></fi_dis>
</div>