Vue的父组件到底是啥?

  • Post author:
  • Post category:vue


希望看到文章的大家如果有答案一定要告诉我!!!万谢!!

观点:


我现在搞不懂,到底哪个想法是对的,暂且支持观点1:

  1. Vue.component里定义的template部分是子组件,HTML中组件标签为父组件。
  2. 包裹组件的那个有Vue实例挂载的元素是父组件,HTML中组件标签为子组件。
  3. 另外,没有写过组件内还有组件的代码,不过暂且直观地认为这种情况下两个组件为父子关系

论证:


Vue教程中Ctrl+F搜索“父组件”,依顺序梳理父组件出现时的描述:

  1. 第一次出现,

    局部注册

new Vue({
  // ...
  components: {
    // <my-component> 将只在父组件模板中可用
    'my-component': Child
  }
});

这么看,是支持观点2的,但是这是局部组件,其他情况呢?

2.

组件组合


这里说父组件通过Prop发数据给子组件,子组件通过事件发消息给父组件。

3.

使用Prop传递数据


这里说通过Prop引用父组件的数据,然后举的例子是:在组件的HTML标签直接使用字符串,看起来支持观点1。

4.

动态Prop


这里的例子里,在组件标签里绑定的数据实际上是来自Vue实例所挂载的元素,但这里却用了“每当父组件的数据变化”这样的说法,看起来是在支持观点2。

但是这里要指出一点,如果支持观点2,则破坏了“父组件不能直接传数据给子组件,要通过prop”,因为这里组件标签是可以直接取到Vue实例的数据parentMsg的。实际上,在学习过程中,代码实践发现,组件标签上用v-for可以直接访问Vue实例的数据数组,用v-on可以直接用Vue实例的methods里定义的方法。

所以,也可以说还是观点1正确,父组件还是组件标签,只不过它把Vue实例的数据和方法绑定到自己身上了,这样也可以说是“每当父组件的数据发生变化”。

5.

替换/合并现有的特性


这里的例子里,又说:“class一个来自组件自身的模板,一个来自父组件”,这个绝对跟Vue实例挂载的元素没关系了吧?看起来支持观点1。

6.

使用 v-on 绑定自定义事件


这里说:“父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件”,结合下面的例子:组件定义时设置了click时触发自定义事件,在组件标签里使用v-on监听自定义事件,这么看来,是支持观点1的。

但是还是之前提到的:组件标签里监听自定义事件的方法是直接用的Vue实例的methods里的方法,暂且还是按4的思路认为支持观点1吧。

7.

.sync修饰符


这里跟上面的4差不多,说“变化也会同步到父组件中所绑定的值”,按观点1解释也可以解释的通。

8. 后面的

使用插槽分发内容

里一系列的说法:

都可以解释为观点1,或者进一步的:如果是在组件里使用组件,那被使用的组件的父组件就是外面那层组件


结论:


综上

,除了组件内还有组件和局部组件这两种情况,我暂且支持观点1,同时按

编译作用域

的说法,在观点1的基础上再加上一点:这种情况下的父组件像其他正常HTML标签一样能访问Vue实例上的各种数据和方法之类的,因而它的作用域可以解释为“可访问它的父级作用域即Vue实例的各种数据和方法”

如果有大神晓得到底咋回事儿的话请一定指教!!!



版权声明:本文为u013836242原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。