Vue| 父组件里面使用一个子组件

最新推荐文章于 2024-05-14 21:52:18 发布

Zero Ice

最新推荐文章于 2024-05-14 21:52:18 发布

阅读量472

点赞数 1

本文链接：https://blog.csdn.net/weixin_41593408/article/details/87985280

版权

[001]前端系列专栏收录该内容

63 篇文章 0 订阅

订阅专栏

// 项目结构

├── index.html
├── main-view.js //父组件
├── desc-view.js //子组件
└── app.js

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>

<body>
    <div id="app">
        <main-view></main-view>
    </div>

    <script type="text/x-template" id="main-view">
        <div>
               <h1>我是一个组件，里面还有一个子组件</h1>
               <desc-view></desc-view>
        </div>
    </script>


    <script type="text/x-template" id="desc-view">
        <div>
               <h1>我是子组件</h1>
        </div>
    </script>

    <script src="./app.js" type="module"></script>
    <script src="https://vuejs.org/js/vue.js"></script>
</body>

</html>

main-view.js

import {descView} from './desc-view.js'  //引入子组件
var mainView = { 
    template: '#main-view',
    components:{
        descView
    }
}

export {
    mainView
};

desc-view.js

var descView = {
    template: '#desc-view'
}

export {
    descView
};

app.js

import {
    mainView
} from './main-view.js';

var app = new Vue({
    el: '#app',
    components: {
        mainView
    }
})

在这里插入图片描述

注意：下面这个是错误的!!!

main-view:

// import {descView} from './desc-view.js'
var mainView = {
    template: '#main-view',
    // components:{
    //     descView
    // }
}

export {
    mainView
};

app.js

//import {buttonSuccess} from './button-success.js';
import {
    mainView
} from './main-view.js';
import {
    descView
} from './desc-view.js';

var app = new Vue({
    el: '#app',
    components: {
        mainView,
        descView
    }
})

报错：

[Vue warn]: Unknown custom element: <desc-view> - did you register the component 
correctly?For recursive components, make sure to provide the "name" option.

在这里插入图片描述

里面的那个不属于子组件！！！

Zero Ice

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue| 父组件里面使用一个子组件

// 项目结构├── index.html├── main-view.js //父组件├── desc-view.js //子组件└── app.jsindex.html&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta na
复制链接

扫一扫

专栏目录