Question

我是Vue.js的新手，我觉得它太棒了。我的任务是开始在我们的非绿地Web应用程序中实现一些vue组件，我想我会首先实现一些自包含的小部件＆＃34;我必须在我的工作轨道应用程序中大量处理状态。

它作为一个独立的组件工作得很好，但我想用数据属性加载它，以便组件知道它需要处理什么。我的Vue文件看起来像（由于IP问题，我已经编辑了部分内容）：

<template>
    <div class="card">
         <div class="card-body">
            ${{ b.id }}
        </div>
        <div class="card-footer bg--blue-sky">
            ${{ b.amount }}
        </div>
    </div>
</template>

<script>
  export default {
    data: function () {
      return {
        errors: [],
        b: {
          id: null,
          amount: null
        }
      }
    },

    // Fetches posts when the component is created.
    created: function () {
      jQuery.ajax({
        url: "/api/b/" + '2' + ".json",
        method: 'GET',
        dataType: "json"
      })
          .then(response => {
            this.b = response.b
          })
          .catch(e => {
            this.errors.push(e)
          });
    }
  }
</script>

<style scoped>

</style>

该组件已注册：

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 }
  })
});

在我的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中的数字＆＃39; 2替换为属性的值）。通过这种方式，我希望该组件能够处理任何＆＃34; fi_dis＆＃34;我选择，只需在我希望它处理的数据属性中指定b-id。

我怎样才能做到这一点？

Answer 1

您传递从父组件传递props到子组件的数据值。

因此，例如，您应该定义允许组件接收哪些道具：

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（简写）。

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

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

1 个答案: