老师，哪个指父组件，那个指子组件哦，听懵了

慕仙本仙_ 2020-05-20

收起

3回答

慕移动3569406 2020-05-26 23:40:55

个人觉得是这样，不知道你记不记得生命周期那一节，生命周期在创建的阶段的时候，它是会判断template选项，也就是这个实例所渲染的模板，这个模板最终会被编译成一个render方法，可以认为是渲染的一个方法，所以子组件在渲染的时候，才能渲染出template指定的内容。

但是Vue根实例是不设置template的，这个时候的render方法编译的模板其实是el的外部HTML，也就是挂载元素的outerHTML, 所以可以认为挂载元素的outerHTML，就是Vue根实例渲染的内容。而渲染的内容里面包含了一个组件，所以这个Vue的根实例可以认为是这个组件的父级，也就可以被称之为父组件。

不知道说的对不对 ?

收起回答

慕移动3569406 #1

请当我没说 ..

2020-05-26 23:42:09

好帮手慕码 2020-05-20 16:35:15

同学你好，解答如下：
父子组件是什么呢，从子组件的观点来看，他的上一级实例或组件即为他的父组件。代码中，counter是定义的一个局部组件。那么在它的上级，即vue实例就是父组件：

vue实例即父组件先通过属性count向子组件的counter标签传递了数据，那么子组件counter要通过props才能接收：

同学可以再理解一下这个用法。

祝学习愉快~

收起回答

好帮手慕码 2020-05-20 11:46:16

同学你好，解答如下：counter是子组件， Vue实例应该是父组件。在视频1.08左右有提到~

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

收起回答

提问者慕仙本仙_ #1

<conter :count="1"></conter> <conter :count="2"></conter> 老师，为什么这里：count="XX"说他是给子组件传值，写在<conter>里面，下面定义的conter不是他自己吗，这里的props不是他自己接收到了吗？没有明白为什么说是父组件给子组件传值。 var conter={ props:['count'], data(){ return{ num:this.count } }, template:'<div @click="eventC" >{{num}}</div>', methods:{ eventC(){ this.num++; } } }

2020-05-20 11:48:50