如何界定Vue中父组件和子组件

题目描述

怎么分辨理解Vue组件的相对关系(父组件和子组件)

题目来源及自己的思路

《Vue.js》实战
组件通过pros属性接受它的父级的数据,那么当前这个组件就是相对的子组件了,提供数据的就是父组件了。

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

<div id="app">
    <my-component message="来自父组件的数据"></my-component>
</div>
<script>
    Vue.component('my-component',{
        props:['message'],
        template:`<div>{{message}}</div>`
    })
    var app=new Vue({
        el:'#app'
    })
</script>

你期待的结果是什么?实际看到的错误信息又是什么?

props:['message'], 通过这里可以知道message是父组件的数据,所以my-component相对而言就是子组件了,问题是my-component的父组件是谁呢。。。。
看到
<my-component message=”来自父组件的数据”></my-component>
就懵了,message这里不是my-component的属性么?怎么和父组件又有关系呢?

回答:

父组件不就是app吗?

我的理解应该是这样的:

<div id="app">
    <my-component :message="msg"></my-component>
</div>
<script>
    Vue.component('my-component',{
        props:['message'],
        template:`<div>{{message}}</div>`
    })
    var app=new Vue({
        el:'#app',
        data:{
            msg:"Hello World!"
        }
    })
</script>

msg就是来自父组件的数据,这里的父组件就是Vue当前的实例app。

回答:

<div id="app">
    <my-component :message="msg"></my-component>
</div>
<script>
    Vue.component('my-component',{
        props:['message'],
        template:`<div>{{message}}</div>`
    })
    var app=new Vue({
        el:'#app'
    })
</script>

最近也碰到这个问题了,想了一下,不知道对不对。

我们狭义上的理解就是认为div#app是父组件,但是能不能将div#app以及它的HTML一个整体看做父组件呢?
【即认为父组件不仅仅是一个孤立的div元素】

全局注册的子组件my-component在获得父元素的prop后就会初始化并替代父组件中的子元素。
【<my-component>看做是子组件的占位符;注册的才是组件。】

那个子组件使用该属性就在该组件的占位符上定义,可以让组件树更清晰(解耦?),避免div#app上挂载过多的属性。

回答:

你这里的my-component的父组件可以理解为是Vue实例,如果在使用vue-router的情况下,父组件一般是router-view
<my-component message="来自父组件的数据"></my-component>
这里的来自父组件的数据意思是这里可以填写来自父组件的数据,也就是来自他的父组件里data的数据

回答:

message 是传入的 props ,和 state 的作用其实是类似的
这个例子举的不是很好,#app 上绑定的是最外层的 Vue 实例,包在这个里面的都属于他的自组件。

父子组件是相对的,不是绝对的。
例如下面的结构,a,b,c 三个 vue 组件,a 包含 b,b 又包含 c,这样的话 b 又是 a 的子组件,又是 c 的父组件。
在 a.vue 中传入的 data=”data1″ 就是传入到 b.vue 的 props
类比你上面就好比 app 这个变量相当于 a.vue 中的 vue 组件,b 相当于 my-component 这个组件

// a.vue
<template>
    <p>aaaa</p>
    <vue-b data="data1"/>
</template>

// b.vue
<template>
    <p>bbbb</p>
    <vue-c data="data2"/>
</template>

// c.vue
<template>
    <p>cccc</p>
</template>

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注