组件与子组件"/>
Vue 父组件与子组件
为了搞清楚父组件与子组件,下面我们先来搞清楚组件的创建与注册的图示过程:
看完过程后我们再来看看菜鸟教程中的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>//第一种定义方式Vueponent('runoob',{template:'<h1>自定义组件</h1>'})new Vue({el:'#app'})//第二种定义方式/* var component=Vue.extend({template:'<h1>自定义子组件</h1>'})Vueponent('runoob',component);new Vue({el:'#app'})*/</script>
</body>
</html>
显示结果:
结合上面两种定义方法,在此我顺便说一下Vue.extend与Vueponent之间的区别:
Vue.extend只是创建组件的一个构造器,你给它参数 他给你一个组件。然后作用到Vueponent 这个全局注册方法里,就如上面代码实例。
下面我们再结合上面的全局组件实例代码,来讲讲父组件与子组件。要明白这两个概念,首先要明白这二者之间的关系,我想关于父子关系在此我不用多说。结合上面代码的第一种方法来讲讲:
runoob与标签h1就是父组件与子组件之间的关系。
.html#top
更多推荐
Vue 父组件与子组件
发布评论