时间戳

首页 > 解决方案 > 如何访问 vue 组件的 data 属性

javascript - 如何访问 vue 组件的 data 属性

问题描述

我是 Vue.js 的新手，我认为它很棒。我的任务是开始在我们的非新建 Web 应用程序中实现一些 vue 组件，我想我会从实现一些必须在我工作的 rails 应用程序中大量处理状态的独立“小部件”开始。

它作为一个独立的组件工作得很好，但我想用数据属性加载它，以便组件知道它需要处理什么。我的 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 中的数字'2'）。通过这种方式，我希望组件能够处理我选择的任何“fi_dis”，只需在我希望它处理的数据属性中指定 b-id。

我怎样才能做到这一点？

标签： javascriptruby-on-railsvue.js

解决方案

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

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

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

并且从组件实现传递数据的语法是使用v-bind:propertyNameor :propertyName（简写）。

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

推荐阅读