首先我们在 src目录下新建一个目录 叫”component”,建一个mycomponent.vue文件，然后也让他打2句话吧
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<template> <div id="mycomponent"> <h1>我是第一个自定义控件</h1> <p>{{ msg }}</p> </div></template><script type="text/javascript"> export default{ data(){ return{ msg : "hi i am wjj" } } }</script> |
然后在我们的app.vue里调用他
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<template><div id="app2"> <p>{{ message }}</p> <input v-model="message"></input> <mycomponent></mycomponent></div></template><script>import mycomponent from './component/mycomponent.vue'export default { name: 'app2', data () { return { message: 'Hello Vue.js!' } },components: { mycomponent }}</script> |
这里 有几个知识点
1.Vue的导入操作是在<script></script>标签里。
2.如果存在子/父控件的概念的话，一定要先初始化/加载子控件 。
效果如下：
