为了搞清楚父组件与子组件，下面我们先来搞清楚组件的创建与注册的图示过程：
看完过程后我们再来看看菜鸟教程中的vue组件实例，实例越简单越好，这是菜鸟教程中的全局组件实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head>
<body>
<div id="app">
<runoob></runoob>
</div>
<script>
//第一种定义方式
Vue.component('runoob',{
template:'<h1>自定义组件</h1>'
})
new Vue({
el:'#app'
})
//第二种定义方式
/* var component=Vue.extend({
template:'<h1>自定义子组件</h1>'
})
Vue.component('runoob',component);
new Vue({
el:'#app'
})*/
</script>
</body>
</html>显示结果：
结合上面两种定义方法，在此我顺便说一下Vue.extend与Vue.component之间的区别：
Vue.extend只是创建组件的一个构造器，你给它参数 他给你一个组件。然后作用到Vue.component 这个全局注册方法里，就如上面代码实例。
下面我们再结合上面的全局组件实例代码，来讲讲父组件与子组件。要明白这两个概念，首先要明白这二者之间的关系，我想关于父子关系在此我不用多说。结合上面代码的第一种方法来讲讲：
runoob与标签h1就是父组件与子组件之间的关系。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
