我是靠谱客的博主 大意鱼，最近开发中收集的这篇文章主要介绍vue脚手架引入组件和vueCDN引入组件1、vue脚手架引入组件2、vueCND引入组件3、完整代码，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述
目录
- 1、vue脚手架引入组件
- 2、vueCND引入组件
- 2.1、方式一
- 2.2、方式二
- 2.3、方式三
- 3、完整代码
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 文件夹
最后
以上就是大意鱼为你收集整理的vue脚手架引入组件和vueCDN引入组件1、vue脚手架引入组件2、vueCND引入组件3、完整代码的全部内容，希望文章能够帮你解决vue脚手架引入组件和vueCDN引入组件1、vue脚手架引入组件2、vueCND引入组件3、完整代码所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复