Vue中到底是什么是父组件,什么是子组件?

curryhh
  • 155

clipboard.png
这里的标签child不是跟注册组件的child是同级吗?怎么是父组件了
求详细解释下父组件 子组件
谢谢

回复
阅读 16.5k
11 个回答
✓ 已被采纳

这里的标签 child 就是 vue 注册的组件,这本来就是子组件。
而这个子组件,其实是存在于一个父组件里的,只是例子中没有写出来,其实是应该这样子的。

<father-component>
    <child message="hello!"></child>
</father-component>

child 是子组件,father是父组件,hello 和child 标签都存在父组件中,hello 通过 props 传进去给子组件使用。

最近也是迷糊了这个问题,以下是我自己的理解,希望帮助到有同样困惑的朋友。

<div id="app">
    <!--<root> 隐性的根组件,相对于注册的全局组件child来说,是父组件-->
    <child msg="hello world"></child><!--child相对root来说是子组件,而 msg 这个变量是存在于父组件内的,应该属于父组件里的数据,虽然这个变量不是初始化就定义了的-->
    <!--</root>-->
</div>
<script>
    //注册一个全局组件,组件标签名为component
    Vue.component('child', {
        //组件构造器,此为一个对象,其中内容为多选项
        props: ['msg'],//接收父组件传递的数据
        template: '<span>{{msg}}</span>',
        data(){return {val: 2};}, //这才是子组件里面的数据
    });
    //实例化Vue
    new Vue({
        el : '#app',
        data : {val : 1}, //这个数据是初始化Vue实例就定义的
    });
</script>

006kIhX0gy1fhq45ruacag30xh0aogmc.gif

我也不是很理解这种父子组件的说法,但是可以简单理解为:使用的地方是父组件,定义的地方是子组件,虽然他们是同一个组件。。

简单来讲:
Vue.component()是制作子组件,<child></child>是制作好了,在父组件环境里面用

也是初学者,这里的子组件应该是span吧,不对的地方还请指正

首先子组件与父组件都是组件,组件会区分父组件与子组件,只是谁包含谁,被包含的就是子组件。<child>在当前组件中,所以在当前组件文件中,他就是子组件

简单理解,父子组件之间的关系和父子元素之间的关系相当

官方文档的例子也就是你上传的那个是他定义的子组件,而引入(使用)子组件的那个就是父组件。这是一个相对的概念。

章鱼小娃子
  • 1
新手上路,请多包涵

更正上一次的回答,所谓的父子组件,简单地说,当我们在A组件中引用了B组件,那么A组件就是父,B组件就是子,能用props属性传递数据

Marcus
  • 3
新手上路,请多包涵

一个vue实例就是一个组件,这里叫a。 我们定义了一个组件之后把它放到另外一个vue实例中,另外的那个就叫b,然后我们就可以说a是b的子组件,因为a在b中使用,也可以看成a成了b的一个元素。。。。

那么哪来的父子组件传值?所谓的父向子就是 b vue实例中的data值传到了组件中使用。 子向父就是 把组件a中的data 传递到了a中。

父向子传值用prop,prop生成组件的属性,当它化生成一个子组件在a中使用的时候,可以通过直接在元素上控制属性,或者通过父实例中的data获取值来改变组件的属性值。

子组件向父组件传值 要用事件。 运用$emit,运用$emit来创建一个事件,把该属性值传到父组件中,父组件里要监听这个事件,通过这个事件来产生值的变化。

747554937
  • 1
新手上路,请多包涵

回答的都是垃圾

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏