vue root 选项属性支持

kiayqfof 于 4个月前发布在其他

关注(0)|答案(7)|浏览(55)

这个功能解决了什么问题？

期望的opts功能应该提供从标记(主要是后端)向vue示例提供数据的可能性。
因此，您可以从vue范围之外传递选项/参数。示例用例：
https://forum.vuejs.org/t/passing-props-to-root-instances-in-2-0/244
目前这需要自定义帮助程序/代码将数据传输到组件。更好的方式是类似于riot使用opts的方式
http://riotjs.com/api/#mounting

提议的API看起来如何？

由于示例根不是自定义标签(与riot相比),我可以想象使用带前缀的属性，例如：
data-opt-[NAME]
所以根可能如下所示：

<div id="myRoot" data-opt-firstname="John" data-opt-lastname="Smith"></div>

在模板中，您可以像这样访问它：

<template>
    <span>Hello {{ opts.firstname }} {{ opts.lastname }}</span>
</template>

vue

来源：https://github.com/vuejs/vue/issues/7924

7条答案

按热度按时间

slmsl1lt1#

更好的方式是使用类似于riot的opts进行更舒适的操作。
http://riotjs.com/api/#mounting
这看起来完全不像你接下来提出的API:

<div id="myRoot" data-opt-firstname="John" data-opt-lastname="Smith"></div>

它看起来更像在创建示例时简单地传递propsData,如下所示：

new Vue ({
  el: '#app',
  propsData: {
    firstname: 'John'
  }
})

将所有data-属性作为props添加可能只需要：

const el = document.getElementById('app')
new Vue ({
  el: el,
  propsData: {
    ...el.dataset
  }
})

赞(0）回复(0）举报 4个月前

yqhsw0fo2#

感谢@LinusBorg的快速回复！
我已经尝试按照您的例子使用propsData,但是它不起作用：
模板中没有任何内容出现，而vue浏览器扩展告诉我同样的问题(未定义)

<div id="myRoot" data-firstname="John"></div>

import Vue from 'vue'
import myRoot from './myRoot.vue')
const el = document.getElementById('myRoot')
new Vue({
    el: el,
    propsData: {
        ...el.dataset
    },
    render: h => h(myRoot)
})

<template>
    <span>Hello {{ firstname }}</span>
</template>
<script>
    export default {
        props: ['firstname']
    }
</script>

然而，即使这样可以工作，它也有几个缺点：

它假设我正在使用ID,但实际上我不是，因为我想要在页面上使用多个分页，所以让'myRoot'调用'pagination'
我需要在模板(vue文件)中将所有选项指定为props

也许我是错的，只是忽略了一些东西，但我还没有找到一种方法可以从标记(非vue原始数据)传递数据到模板。至少没有像在riot中那样简单的方法：

在标记中创建自定义标签(= vue根元素)和自定义属性(就像<mytag name="John"></mytag>一样)
通过<span>{ opts.name }</span>轻松访问标签文件(= vue组件/模板)

对我来说，propsData解决方案不符合这些需求，对吗？

赞(0）回复(0）举报 4个月前

cbwuti443#

更新

我找到了一种适合我的方法，尽管它似乎并不直接。
看起来像这样(这次我使用分页来获得一个更“真实”的例子):
home.html

<body>
    <div class="pagination" data-page="1"></div>
    <p>Lorem ipsum</p>
    <div class="pagination" data-page="1"></div>
    <script src="/assets/dist/pagination.js"></script>
</body>

src/pagination.js

import Vue from 'vue';
import Pagination from './pagination.vue';
document.querySelectorAll('.pagination').forEach(function(elem){
    new Vue({
        el: elem,
        render: h => h(Pagination),
        data: { opts: {} },
        beforeMount: function() {
            this.opts = this.$el.dataset;
        }
    });
});

src/pagination.vue

<template>
    <div>
        <span>Current page: {{ opts.page }}</span>
    </div>
</template>
<script>
export default {
data() {
return {
opts: this.$root.opts
}
}
}
</script>

如果没有更简单的方法可以做到这一点，并且您认为没有必要通过vue简化这个功能请求，您可以关闭这个功能请求。

赞(0）回复(0）举报 4个月前

fd3cxomn4#

从之前的两条评论中，我有两个建议：
你可能无法直接将这些内容添加到你的代码中，但可能会给你一些可以考虑和尝试的东西。
如果你有一个 Vue 示例，它 Package 了你的 HTML(更接近 body 层级),你可以像处理分页的 pagination.vue 模板一样传递变量：
pagination.js

...
import Pagination from './Pagination.vue'
...
components: { Pagination },
...

template

<body>
    <div id="app">
        <pagination :data="opts.data1" data-page="1"></div>
       <p>Lorem ipsum</p>
        <pagination :data="opts.data2" data-page="1"></div>
    </div>
</body>

或者，是否有可能使用插件来解决这个问题？受到 Vuex 将存储提供给所有子组件的方式的启发，你能否制作一个插件，为所有组件提供这些属性？

const userOptionsFromServer = {...}

const UserDataPlugin = {
  install (Vue) {
    Vue.mixin({
      created() {
        this.opts = userOptionsFromServer
      }
    })
  }
}

Vue.use(UserDataPlugin)

赞(0）回复(0）举报 4个月前

3xiyfsfu5#

感谢@ejweiler的帮助！
如果我理解错了，那么您示例中的模板语法确实需要在客户端使用vue编译器，对吗？或者这个只能通过运行时由vue解释吗？

<pagination :data="opts.data1" ...

我之所以将所有组件(分页、搜索等)拆分成独立的文件而不是一个大的捆绑包app.js,是因为我想尽可能地在每个页面上加载最少的代码。因此，我使用了没有编译器的vue。由于HTML是在后端构建的，我无法预编译它(vue的SSR不是选项),因此只能预编译vue文件。
上面我发布的方法是我迄今为止找到的唯一一种方法，可以让我在同一页面上包含来自后端的不同数据/选项的相同组件

<body>
    <div class="pagination" data-title="header pagination 123"></div>
    <p>Lorem ipsum</p>
    <div class="pagination" data-title="footer pagination 456"></div>
    <script src="/assets/dist/pagination.js"></script>
</body>

赞(0）回复(0）举报 4个月前

k4ymrczo6#

@SassNinja 我没有意识到你有这些限制，那么尝试使用插件的选项怎么样？

赞(0）回复(0）举报 4个月前

3z6pesqy7#

所以我也找到了一个相当容易使用的解决方案，但我不确定它是否违反了 Vue 的一些规则，因为我们将 $x_1m_0n_1^x$ 和 $x_1m_1n_1^x$ 绑定到同一个 DOM 元素上。

例如：$x_1e_0f_1^x$

代码：

$x_1a_0b_1^x$

$x_1a_1b_1^x$

赞(0）回复(0）举报 4个月前