简单网站建设教程,在哪家网站可以买做服装的模具,摄影毕业设计选题作品,番禺响应式网站建设在vue3中父组件访问子组件中的属性和方法是需要借助于ref:
1.script setup 中定义响应式变量 例如#xff1a; const demo1 ref(null)
2.在引入的子组件标签上绑定ref属性的值与定义的响应式变量同名( demo1 refdemo1/)。 父组件代码如下… 在vue3中父组件访问子组件中的属性和方法是需要借助于ref:
1.script setup 中定义响应式变量 例如 const demo1 ref(null)
2.在引入的子组件标签上绑定ref属性的值与定义的响应式变量同名( demo1 refdemo1/)。 父组件代码如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 template demo1 refdemo1/ demo2 refdemo2/ demo3 refdemo3/ /template script setup import Demo1 from /components/demo1.vue import Demo2 from /components/demo2.vue import Demo3 from /components/demo3.vue import {ref,onMounted} from vue const demo1 ref(null) const demo2 ref(null) const demo3 ref(null) onMounted(() { console.log(demo1.value.count,demo1子组件) console.log(demo2.value?.a,demo2子组件) console.log(demo3.value.list[0],demo3子组件) }) /script 子组件代码如下 demo1.vue 1 2 3 4 5 6 7 8 9 10 11 12 13 14 template h1im demo1 content{{count}}/h1 /template script import {ref} from vue export default { setup () { const count ref(999) return { count } } }
此时父组件可以获取到子组件的count属性此时子组件用的是 export default 的写法 demo2 1 2 3 4 5 6 7 8 template h1我是demo2/h1 /template script setup import {defineExpose,ref} from vue const a ref(helloss) /script
当使用 script setup 写法会导致父组件无法访问到子组件中的属性和方法。 使用 script setup 的组件想要让父组件访问到它的属性和方法需要借助与defineExpose来指定需要暴露给父组件的属性。 更改后的demo2组件 1 2 3 4 5 6 7 8 9 10 11 template h1我是demo2/h1 /template script setup import {defineExpose,ref} from vue const a ref(helloss) defineExpose({ a }) /script demo3 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 template h1我是demo3/h1 /template script export default { data () { return { list:[a,b,c] } }, methods: { btn () { } } } 这种方式父组件可以正常获取到里面的属性和方法。
