父组件向子组件传值 provide inject
父组件
import { provide, ref, readonly } from 'vue'
setup() {
const name = ref('zhangsan')
// readonly避免子组件改变父组件中的值 保证单向数据流
provide('name', readonly(name));
provide('changeName', (value) => {
name.value = value
})
},
template: `
<div>child /></div>
`
子组件
import { inject } from 'vue'
setup() {
const name = inject('name')
const changeName = inject('changeName')
const handleClick = () => {
changeName('lisi')
}
return { name, handleClick }
},
template: `<div @click="handleClick">{{name}}</div>`
vue3中如何获取div对应的dom节点 ref
1.固定写法 声明一个常量 const hello = ref(null) return { hello }。 2.模版中定义一个ref="hello"的div 名字对应起来。 3.在onMounted中获取dom节点
// 该ref是生成响应式的引用 两者结合才可获取真实的dom节点元素
import { ref, onMounted } from 'vue'
setup() {
const hello = ref(null)
onMounted(() => {
})
const changeName = inject('changeName')
const handleClick = () => {
changeName('lisi')
}
return { hello }
},
// 该ref是要获取dom节点的引用
template: `<div ref="hello">hello world</div>`
