在我刚开始接触到
vue组件时，还是一脸的懵逼，于是我查了一下父组件与子组件的区别：其实：
- 我们在定义的
vue实例对象时，vue绑定的 元素就是一个父组件;- 而我们定义的组件就是一个 子组件。话不多说，直接上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src='./js/vue.js'></script> </head> <body> <div id="app"> <div>{{ pmsg }}</div> <!-- 2. 绑定数据到组件中 --> <menu-item :pstr='pstr' :pnum='12' :pbool=true :parry='parry' :pobj="pobj"></ menu-item> </div> <script> // 自定义组件 Vue.component('menu-item',{ props: ['pstr', 'pnum', 'pbool','parry', 'pobj'], // 3. 接收 // 4. 模板渲染 template:` <div> <div>{{ pstr }}</div> <div>{{ pnum + ' ' + typeof pnum }}</div> <div>{{ pbool }}</div> <ul> <li :key="index" v-for="(item, index) in parry">{{ item }}</li> </ul> <div> <span>{{ pobj.name }}</span> <span>{{ pobj.age }}</span> </div> </div> ` }); // 创建 Vue实例，得到ViewNodel var vm=new Vue({ el:'#app', data:{ pmsg:'父组件中内容', pstr:'hello', parry:['apple', 'orange', 'banana'], // 1. 提供数据 pobj:{ name:'lisi', age:12, } }, methods:{} }); </script> </body> </html>一般都会觉得父组件是
<menu-item></menu-item>，或加上包含他的<div id="app">，子组件是template: '<div>...</div>'。
这种理解虽然勉强正确，但是有很大问题，想要理解父子组件或兄弟组件之间的通信，这样的理解远远不够。真正的父组件或子组件，应该站在更底层的角度去理解，我目前对父组件的理解是：
- 父组件： 已被挂载的
vue实例;- 子组件： 被这个实例调用的自定义组件本身，而不仅仅是自定义标签或自定义组件中的模版标签。
在这个例子中，父组件是var app=new Vue({el: '#app'})， 而子组件是自定义的组件整体。
Vue 的子组件 与 父组件
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 深入响应式 追踪变化： 把普通js对象传给Vue实例的data选项，Vue将使用Object.defineProp...
- 在这一节里，我们将会了解到Vue的组件，理解组件是如何工作的，并利用一系列的例子证明，用组件化的思想开发项目，会给...
