Question

我正在尝试为一些重复的html创建自定义组件。但是该组件无法显示，并且出现此错误：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

found in

---> <Child>
       <VApp>
         <App> at src/App.vue
           <Root>

我的main.js：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false

Vue.component('child', {
  props: ['text'],
  template: `<div>{{ text }}<div>`
});

new Vue({
  router,
  vuetify,
  render: h => h(App)
}).$mount('#app')

我的App.vue：

<template>
  <v-app>
    <child :text="message"></child>
    <Navbar/>
    <v-content>
      <router-view></router-view>
    </v-content>
    <Footer/>
  </v-app>
</template>

<script>
import styles from './app.css'
import Navbar from '@/components/Navbar'
import Footer from '@/components/Footer'

export default {
  name: 'App',
  components: { Navbar, Footer },
  computed: {
    theme(){
      return (this.$vuetify.theme.dark) ? 'dark' : 'light'
    },
  },
  data: () => ({
    //
  }),
};
</script>

这是怎么回事？如何定义自定义组件？

我的问题“主要是代码”；因此，我对vue.js的想法是：我注意到构建vue.js应用程序有很多不同的方式或样式。我希望他们的示例能够为放置示例代码的地方提供更多的上下文，我是一个经验丰富的开发人员，但是对于Web开发人员和js还是陌生的，并且发现vue.js网站上缺少示例确实使学习变得困难这个框架。

Answer 1

尝试一下：

1-在单独的.vue文件中创建组件

2-在main.js中全局注册

3-然后直接在任何组件中调用它。

1。

<template><div>{{ text }}<div></template>
<script>
    export default{
    props:['text']
    },

</script>

2。在main.js中

//...
Vue.component('child-component',require('./path/to/chaild/compoent').default);
//...

3 现在，您可以在任何组件中调用它，因为它是全局注册的。

<template>
    <div>
       <child-component text='some text to pass as prop.'/>
      //...
    </div>
</template>
//...

Vue不会渲染自定义组件

1 个答案: