MENU

1、Vue脚手架引入组件

自知

2、VueCND引入组件

2.1、方式一

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueCDN引入组件的方式-01</title>
</head>

<body>
    <div id="app">
        <div>父组件</div>

        <menu-component :title="title"></menu-component>
    </div>

	<!-- 把组件放到id为app的div里面有不一样的效果 -->
    <template id="menu-component">
        <div>
            <div>子组件</div>
            <div>{{title}}</div>
        </div>
    </template>
    
    <script src="/node_modules/vue/dist/vue.js"></script>
    <script src="./index.js"></script>
</body>

let MenuComponent = {
    name: 'MenuComponent',
    template: '#menu-component',
    props: ['title']
};

new Vue({
    el: '#app',
    components: {
        MenuComponent
    },
    data: {
        title: "父组件传值到子组件"
    }
});

2.2、方式二

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue引入组件的方式-02</title>
</head>

<body>
    <div id="app">
        <div>父组件</div>
        <templates></templates>
    </div>

    <script src="/node_modules/vue/dist/vue.js"></script>
    <script src="./index02.js"></script>
</body>

const templates = {
    template: `
        <div>
            <div>子组件</div>
            <button @click="clickFoo">点击</button>
            <div>{{action}}</div>
        </div>`,
    data() {
        return {
            action: "",
            isShow: true
        }
    },

    methods: {
        clickFoo() {
            if (this.isShow) {
                this.action = "闪现";
                this.isShow = false;
            } else {
                this.action = "";
                this.isShow = true;
            }
        }
    }
};

var app = new Vue({
    el: '#app',
    components: {
        templates
    },
    data: {}
});

2.3、方式三

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue引入组件的方式-03</title>
</head>

<body>
    <div id="app">
        <div>父组件</div>

        <children></children>
    </div>


    <script src="/node_modules/vue/dist/vue.js"></script>
    <script src="./index03.js"></script>
</body>

Vue.component('children', {
    name: "children",
    template: "<div>子组件</div>"
});

new Vue({
    el: '#app',
    data: {}
});

3、完整代码

gitee(码云) - mj01分支 - importComponent 文件夹

# 前端
Logo
技术共进，成长同行——讯飞AI开发者社区

技术共进，成长同行——讯飞AI开发者社区

更多推荐

cover

Gemini Robotics 1.5 谷歌通用人形机器人具身智能模型

avatar 讯飞AI开发者社区
cover

38_多模态模型：CLIP的视觉-语言对齐_深度解析

avatar 讯飞AI开发者社区
cover

程序员必学！大模型五大核心技术(MCP/Agent/RAG/RPA/A2A)全解析（收藏版）

avatar 讯飞AI开发者社区