fxxqq / 6fedcom.github.io

frank的前端养成记(hexo博客)
https://6fed.com
22 stars 5 forks source link

vue如何在一个组件中引用另外一个组件并使用?有两种方法 #16

Open fxxqq opened 6 years ago

fxxqq commented 6 years ago

方法一:代码如下

<template>  
    <div>  
        <!-- 3.在template中就可以直接使用了 -->  
        <testComponent></testComponent>  
    </div>  
</template>  

<script>  
    //1.先使用import导入你要在该组件中使用的子组件  
    import testComponent from './testComponent.vue'  
    export default {  
        //2.然后,在components中写入子组件  
        components: {testComponent},  
        methods: {},  
    }  
</script>  

<style></style>  

方法二:代码如下

<template>  
    <div>  
        <!-- 2.在template中使用 -->  
        <testComponent></testComponent>  
    </div>  
</template>  

<script>  
    export default {  
        //1.直接在components中写入子组件  
        components: {  
            testComponent:require('./testComponent.vue').default  
        },  
        methods: {},  
    }  
</script>  

<style></style>