目录
1、vue脚手架引入组件
- 1、vue脚手架引入组件
- 2、vueCND引入组件
-
- 2.1、方式一
- 2.2、方式二
- 2.3、方式三
- 3、完整代码
自知
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 <template id="menu-component"> <div> <div>子组件{title}} 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 template: `2.3、方式三`, 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: {} });子组件点击{{action}}
<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 name: "children", template: "3、完整代码子组件" }); new Vue({ el: '#app', data: {} });
gitee(码云) - mj01分支 - importComponent 文件夹
