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实例的各种数据和方法”

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

猜你喜欢

转载自blog.csdn.net/u013836242/article/details/78458731
今日推荐