File tree Expand file tree Collapse file tree 1 file changed +13
-10
lines changed Expand file tree Collapse file tree 1 file changed +13
-10
lines changed Original file line number Diff line number Diff line change @@ -706,36 +706,39 @@ const vnode = withDirectives(h('div'), [
706706
707707<div class =" composition-api " >
708708
709- Composition API では、 ` ref ()` 自身を vnode の props として渡すことで、テンプレート参照が作成されます :
709+ Composition API を使用すると、 [ ` useTemplateRef ()` ] ( /api/composition-api-helpers#usetemplateref ) < sup class = " vt-badge " data-text = " 3.5+ " /> のテンプレート参照は、 vnode に props として文字列値を渡すことによって作成されます :
710710
711711``` js
712- import { h , ref } from ' vue'
712+ import { h , useTemplateRef } from ' vue'
713713
714714export default {
715715 setup () {
716- const divEl = ref ( )
716+ const divEl = useTemplateRef ( ' my-div ' )
717717
718- // <div ref="divEl ">
719- return () => h (' div' , { ref: divEl })
718+ // <div ref="my-div ">
719+ return () => h (' div' , { ref: ' my-div ' })
720720 }
721721}
722722```
723723
724- もしくは(バージョン 3.5 以上)
724+ <details >
725+ <summary >3.5 以前を使用している場合</summary >
726+
727+ useTemplateRef() が導入されていない 3.5 より前のバージョンでは、ref() 自体を vnode の props としてとして渡すことにより、テンプレート参照が作成されます:
725728
726729``` js
727- import { h , useTemplateRef } from ' vue'
730+ import { h , ref } from ' vue'
728731
729732export default {
730733 setup () {
731- const divEl = useTemplateRef ( ' my-div ' )
734+ const divEl = ref ( )
732735
733736 // <div ref="divEl">
734- return () => h (' div' , { ref: ' my-div ' })
737+ return () => h (' div' , { ref: divEl })
735738 }
736739}
737740```
738-
741+ </ details >
739742</div >
740743<div class =" options-api " >
741744
You can’t perform that action at this time.
0 commit comments