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

【问题标题】：Passing data-attribute from Vue instance html tag从 Vue 实例 html 标签传递数据属性
【发布时间】：2019-07-28 05:54:30
【问题描述】：

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

index.html:

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

App.vue：

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

【问题讨论】：

标签： vue.js

【解决方案1】：

此代码适用于我：

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

【讨论】：

【解决方案2】：

是的：

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>

【讨论】：

即使我声明了data-title标签，它在Vue渲染时也会被重置。所以这会返回 undefined。
我明白了——这可能是因为我的结构。我在一个单独的 main.js 文件中有我的 Vue init - 其余部分在 App.vue 中完成

【解决方案3】：

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

{
    el: '#app',
    template: `
        <div ref="mydiv" data-attribute="data attribute">
            Hello from template
            <div>
                Hello from {{attribute}}
            </div>
        </div>`,
    data(){
        return {
          attribute: ''
        }
    },
    mounted(){
        this.$data.attribute = this.$refs.mydiv.dataset.attribute;
    }
});

Here's a pen with a working example

【讨论】：