Question

是否可以从Vue实例的html标签声明并传递数据属性值，然后在数据对象中使用它？

index.html：

<div id="app" data-title="My app title"></div>

App.vue：

data () {
  return {
    appTitle: // whatever is declared in data-title
  }
}

Answer 1

是的

data () {
  return {
    appTitle: document.getElementById('app').dataset.title
  }
}

但是，DOM在组件初始化时可能不可用。因此，您可能应该将该代码放入组件的挂接钩子中：

<script>
    export default {
        data () {
            return {
                appTitle: null
            }
        },
        mounted () {
            this.appTitle = document.getElementById('app').dataset.title
        }
    }
</script>

Answer 2

这是另一种方法，它不依赖DOM API，但不能用于从根（#app）元素获取数据属性：

Cookie waitCookie = new Cookie("waitingCookie", "done");
response.addCookie(waitCookie);

Here's a pen with a working example

Answer 3

此代码对我有用：

index.html ：

<div id="app" data-id="123"></div>

index.js ：

(function (el) {

    new Vue({
        el,
        render: h => h(Module),
        data: () => Object.assign({}, el.dataset) ,
    });

})(document.getElementById('app'));

Module.vue ：

export default {
    name: 'Module',
    data() {
        return {
            id: this.$parent.id,
        };
    },
};

从Vue实例html标签传递数据属性

3 个答案: