- Vue.js从入门到项目实践(超值版)
- 聚慕课教育研发中心编著
- 207字
- 2022-07-29 14:27:43
4.3 extend的用法
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P75_9830.jpg?sign=1738824488-FQqERFdAN2ip9ql4tYS7BUIAY5OfzLJm-0-badfba5e7de51f569ef353d61ff28bee)
extend:局部注册时应用。注意,extend创建的是一个组件构造器,而不是一个具体的组件实例。因此,不能直接在new Vue()中使用new Vue({components:fun}),而是需要通过Vue.components()注册才可以使用。
代码如下:
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P75_53046.jpg?sign=1738824488-Mbde0elqUb4vIMmDm4ZMzAvTSKhm0t2p-0-81d4372759f418d3aabe7e2327404ea1)
运行的效果如图4-12所示。
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P76_9919.jpg?sign=1738824488-1Q67Z6yelOSAY3fVVr48ZmXZvZysEGoo-0-a61f2ba45f2092cc9143fe118dedce7a)
图4-12 extend运行效果图(一)
在实例化extend组件构造器时,传入属性必须是propsData,而不是props。另外,无论是Vue.extend()还是Vue.component()中的data定义都必须是函数返回对象,如Vue.extend({data:function(){return{}}})。
此外,使用new Vue()可以直接对data设置对象,如new Vue({data: {}})。代码如下:
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P76_53048.jpg?sign=1738824488-6w7560d6Tsh8TfaOHRBfmo7P2k2Hls2J-0-4ed0acd9182730ed95fe77d41bc164ad)
运行的效果如图4-13所示。
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P77_10194.jpg?sign=1738824488-XExPnfJjWpbT43dpXY8KzsZcve0T6HtC-0-4d0415fab5027756236e8eab28204313)
图4-13 extend运行效果图(二)