vue如何引用组件

  1. Vue组件中定义需要引用的子组件。例如:
    // 子组件
    Vue.component('my-component', {
      template: '<div>A custom component!</div>'
    })
    

  2. 在父组件中引用该子组件。例如:
    // 父组件
    new Vue({
      el: '#app',
      template: '<div><my-component></my-component></div>'
    })
    

    在这个例子中,我们定义了一个 my-component 组件,并在父组件的模板中使用了这个组件。当父组件被渲染时,它将引用并显示 my-component 组件。

    注意:如果你使用了 Vue 单文件组件(.vue文件),则可以使用 import 来引入组件。例如:

    import myComponent from './myComponent.vue'
    
    export default {
      components: {
        'my-component': myComponent
      }
    }
    

    这个例子中,我们使用 import 引入了单文件组件 myComponent.vue,然后将其作为子组件的引用方式添加到父组件的 components 选项中。然后,你就可以在父组件中使用 my-component 标签来引用和显示这个组件了。

猜你喜欢

转载自blog.csdn.net/qq_19820589/article/details/131015186