0

我一直致力于使用 Vueify 将 vue.js 组件从 vue 1.0 移植到 Vue 2.0。在Starter 资源中，它指出：

当你使用 vue-loader 或 vueify 导入 *.vue 文件时，它们的部分会自动编译成渲染函数。因此建议使用带有 *.vue 文件的运行时构建。

然而，情况似乎并非如此。如果我有一个简单的组件，例如：

<template>
    <div>
        {{ msg }}
    </div>
</template>

<script type="text/javascript">
export default {
    props: {
        msg: {
            default: "Child Message"
        }
    }
}
</script>

在我的main.js文件中，我这样做：

import Vue from 'vue'
import MyComponent from './my-component.vue';

Vue.component('my-component', MyComponent);

new Vue({
    el: '#app',
    render: function(createElement) {
        return createElement(MyComponent)
    }
});

然后使用 Gulp 编译：

browserify('./main.js')
    .transform(vueify)
    .bundle()
    .pipe(fs.createWriteStream("bundle.js"))

除了让它渲染之外，我无法对组件做任何事情。实际上，它会在找到 id 为“app”的 div 后立即渲染组件：

<div id="app">
  <!-- my-component renders even though I didn't ask it to -->
</div>

并且不会收到添加到组件中的任何道具，因此：

    <div id="app">
      <!-- 
      Message displays as default "Child Message" rather than "Parent Message". The prop wasn't passed
      -->
      <my-component msg="Parent Message"></my-component>
    </div>

同样，如果我添加data到main.js，则无法从网页访问：

import Vue from 'vue'
import MyComponent from './my-component.vue';

Vue.component('my-component', MyComponent);

new Vue({
    el: '#app',
    render: function(createElement) {
        return createElement(MyComponent)
    },
    data() {
        return {
            msg: "Parent Message"
        }
    }
});

在 HTML 中：

<div id="app">
  {{ msg }} // This will not print
</div>

并且“#app”中的任何内容都不会呈现（记住“my-component”即使我不添加它也会呈现）：

<div id="app">
  <!-- This doesn't render-->
  <strong>A component </strong>
  <my-component></my-component>
</div>

因此，在我看来，您可以渲染一个组件，而无需对其进行任何控制，并且您无法对视图模型做任何进一步的事情，那么我真的应该按照建议使用仅运行时构建吗？

最后，我使用aliasify使用了独立构建，一切正常，但我真的很想知道在运行时构建中使用vueify时我缺少什么。当然，我所描述的行为不是应该发生的，所以我只能假设我在某个地方误解了某些东西。

4

1 回答 1

1

做一些测试，问题出在你的默认渲染函数中：

render: function(createElement) {
    return createElement(MyComponent)
}

它覆盖了主 Vue 文件的渲染函数并创建了一个基础 MyComponent 将其插入到正文中。

当我删除渲染功能时，道具触发了。

jsFiddle试试看，只需取消对渲染函数的注释即可了解我的意思。

渲染功能旨在通过允许您拥有更多控制权并利用其他模板选项来替换 html 模板。

于 2016-10-03T17:33:28.123 回答