Question

我一直在使用Vueify将vue.js组件从vue 1.0移植到Vue 2.0。在Starter resources中声明：

当您使用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 时我缺少的是什么运行时构建。当然，我所描述的行为并非应该发生的事情，所以我只能假设我在某处误解了某些事情。

Answer 1

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

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

它覆盖了主Vue文件的渲染功能，并创建了一个基本的MyComponent，将其插入到正文中。

当我删除了渲染功能时，支持射击。

jsFiddle试试看，只需取消注释渲染功能，看看我的意思。

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

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

1 个答案: