Vue—组件本质—Vue与VueComponent

9 篇文章 0 订阅


前言

通过组件的学习,我们发现组件里面的属性和方法与vue实例对象及其的相似,这是什么原因呢?笔者将通过本文阐述一下自己的理解。


组件的本质

组件本质其实是名为 VueComponent 的构造函数。
构造组件时,Vue会自动的帮我们调用Vue.extend() 这个函数,生成一个名为VueComponent 的构造函数。
Vue在解析页面时,遇到组件标签,就会帮我们调用这个构造函数创建组件的示例对象,即Vue帮我们执行:new VueComponent(options)

Vue与VueComponent

Vue还做了另外一件事:
将VueComponent的原型对象的隐式原型链指向了Vue的原型对象。

VueComponentprototype.proto === Vue.prototype
这样就可以让组件实例对象可以访问到 Vue原型对象上的属性、方法。

原型对象关系图


总结

Vue修改了组件原型对象的隐式原型链,将其指向Vue的原型对象。使得组件实例对象可以使用Vue原型对象中的方法和属性。

Vue 实例对象 ≠ VueComponent示例对象(组件)
两者区别:

  • 组件件中没有el配置项;
  • 组件中data配置项必须为函数式。
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3中,可以使用 `v-bind` 指令的 `.sync` 修饰符来实现父组件与子组件之间的双向绑定,从而获取子组件实例并调用子组件的方法。 首先,需要在父组件中使用 `v-bind` 指令将子组件的实例绑定到父组件的一个变量上。例如: ```vue <template> <div> <component :is="selectedComponent" :child-instance.sync="childInstance"></component> <button @click="handleClick">Call Child's Method</button> </div> </template> <script> import ChildComponent1 from './ChildComponent1.vue' import ChildComponent2 from './ChildComponent2.vue' export default { components: { ChildComponent1, ChildComponent2 }, data() { return { selectedComponent: 'ChildComponent1', childInstance: null } }, methods: { handleClick() { if (this.childInstance) { this.childInstance.doSomething() } } } } </script> ``` 在子组件中,需要使用 `emit` 方法将子组件的实例暴露给父组件。例如: ```vue <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: 'Hello from ChildComponent1!' } }, mounted() { this.$emit('update:childInstance', this) }, methods: { doSomething() { console.log('ChildComponent1 is doing something...') } } } </script> ``` 这样,父组件就可以在 `childInstance` 变量中获取到子组件的实例,并调用子组件的方法。需要注意的是,这种方式只适用于动态组件,即使用 `v-bind` 指令的 `is` 属性来动态切换组件。如果是静态组件,可以直接通过 `ref` 获取子组件实例。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值