在 Vue.js 中将 Vueify 用于仅运行时构建的组件

Question

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

When you use vue-loader or vueify to import *.vue files, their parts are automatically compiled into render functions. It is therefore recommended to use the runtime-only build with *.vue files.

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

<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>

同样，如果我在main.js中添加data，它是无法从网页访问的：

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[= 时我错过了什么48=] 与运行时构建。当然我描述的行为不是应该发生的，所以我只能假设我误解了某处。

Answer 1

进行一些测试，问题出在您的默认渲染函数中：

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

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

当我删除渲染函数时，道具被触发。

jsFiddle试试看，只要取消注释渲染函数就明白我的意思了。

呈现函数旨在通过让您拥有更多控制权和利用其他模板选项来取代 html 模板。

在 Vue.js 中将 Vueify 用于仅运行时构建的组件

Using Vueify for components with the runtime-only build in Vue.js

javascript

vue.js

vueify