首先我们在 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.如果存在子/父控件的概念的话，一定要先初始化/加载子控件 。
效果如下：
