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>
<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 文件夹
|