主要描述 vue3中 jsx的写法,写法习惯同 react
// 子组件 demo.ts
import { defineComponent, ref, reactive, onMounted } from 'vue'
export default defineComponent({
props: { // 父传子 子组件接收数据
num: {
type: Number,
default: 0
}
},
emits: ['change'], // 子传父 注册事件
setup(props, { emit, attrs, slots,expose }) { // 主要代码入口
const state = reactive({
name: 'vue3',
count: 3
})
expose({state}) // 暴露子组件数据
const ppt = ref(1)
const add = () => {
state.count++
}
return () => (<div>
<h1>{props.num}++++ 父传子</h1>
<div>{slots.default && slots.default(state)}</div> // 默认插槽 埋点 并传入数据
<hr />
<div>{ slots.top && slots.top({ ppt: ppt.value }) }</div> // 具名插槽 埋点 并传入数据
<span>{ppt.value}</span>
<ul> // v-for jsx 写法
{[1, 2, 3, 4, 5, 6, 7, 8, 9].map(item => <li key={ item }>{ item }++++ v-for</li>)}
</ul>
<div>{ state.count > 100 ? <span>大于100</span> : <span>小于100</span> } ++++ v-if</div> // v-if jsx写法
<div>{state.name} ++ 改变的数据</div>
<div>{state.count}++</div>
<a-input v-model:value={state.count} placeholder='请输入++++ v-model'></a-input>
<a-button onClick={add}>add ++++ click</a-button> // 使用on前缀,加方法 如 onClick onSubmit 还有自定义的emit方法 如onChange等 写法用小驼峰
<a-button onClick={() => emit('change', state.name)}>子传父 按钮</a-button> // 按钮 触发子传父 改变父组件数据
</div>)
}
})
// 父组件 father.ts
import { defineComponent, ref } from 'vue'
import demo from './demo' // 导入组件
export default defineComponent({
components: { demo }, // 注册组件
setup() {
const num = ref(100)
const tap = (s) => { // 父组件定义的方法 用来改变组件内的数据 接收emit的参数改变值
num.value = s
}
return () => (
<div id='app'>
<demo num={num.value} onChange={tap}> // name 传给子组件的值 为onChange定义方法触发执行
{{ // 插槽使用
default: (data) => <div>{data.name} +++ 默认插槽</div>, // 定义内部传入内容 默认
top: (data) => <div>{data.ppt} 具名插槽</div>
}}
</demo>
</div >
)
},
})