您的位置:首页 > 产品设计 > UI/UE

Vue的父组件到底是啥?

2017-11-06 16:09 323 查看
希望看到文章的大家如果有答案一定要告诉我!!!万谢!!

观点:

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

Vue.component里定义的template部分是子组件,HTML中组件标签为父组件。

包裹组件的那个有Vue实例挂载的元素是父组件,HTML中组件标签为子组件。

另外,没有写过组件内还有组件的代码,不过暂且直观地认为这种情况下两个组件为父子关系

论证:

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

第一次出现,局部注册

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

如果有大神晓得到底咋回事儿的话请一定指教!!!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  vue-js