• home > webfront > ECMAS > vue3 >

    vue2升级vue3:Vue3时jsx组件绑定自定义的事件、v-model、sync修

    Author:zhoulujun Date:

    踩坑笔记:组合式 API之Setup(props,context)—Vue2 x到Vue3注意Vue2的 sync修饰符转Vue3中v-model可以先看vue2的 sync 修饰符 文档:

    踩坑笔记:组合式 API之Setup(props,context)—Vue2.x到Vue3注意

    Vue2的.sync修饰符转Vue3中v-model

    可以先看vue2的  .sync 修饰符 文档:   https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-修饰符


    在父组件中的

    <div :title.sync="visible" ></div>

    等同于: / .sync将针对于title的监听事件缩写 /

    <div :title="visible" @update:title="visible = $event" ></div>

    在子组件的methods中使用如下将新的value传给父级:

    handleClose() {
        this.$emit('update:title', newValue)
    }

    Vue3中用v-model替代了.sync修饰符和组件的model选项

    vue3 v-model

    具体看看官方文档:https://v3.cn.vuejs.org/guide/migration/v-model.html

    vue3 v-model v-bind anatomy

    比如:

    <ChildComponent v-model="pageTitle" />
    <ChildComponent title.sync ="pageTitle" content.sync ="pageContent" />

    在vue3里面的写法是

    <div v-model:title="visible" ></div>
    <ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />

    注意点:

    所有不带参数的 v-model,请确保分别将 prop 和 event 命名更改为 modelValue 和 update:modelValue

    <ChildComponent v-model="pageTitle" />

    js代码

    // ChildComponent.vue
    export default {
      props: {
        modelValue: String // 以前是`value:String`
      },
      emits: ['update:modelValue'],
      methods: {
        changePageTitle(title) {
          this.$emit('update:modelValue', title) // 以前是 `this.$emit('input', title)`
        }
      }
    }


    Vue3 jsx组件绑定自定义的事件、v-model使用

    绑定的事件名称前面加上on,事件名改为驼峰命名法并且首字母大写,拼接上前面的on即可绑定自定义事件。跟onClick绑定事件方式一致。

    renderDropdown(h){
      return <el-dropdown onVisibleChange={val => { console.log(val) }}>  code...</el-dropdown>
    }

    Vue3 jsx新特性,支持v-model使用,如果组件的v-mdel是modelValue的话,那使用很简单

    renderDropdown(h){
    	const value = "value"
    	return <custom-component v-mode={value}>
    		code...
    	</custom-component>
    }

    在Vue2里面,v-mode必须使用value的prop,用法不够灵活。

    vue3默认绑定的v-model是modelValue,但是允许开发人员自定义v-model绑定的prop,例如v-model:title="pageTitle"改为绑定title值,使用起来也是很方便,但是在jsx里面使用就不是这样了

    举例:比如el-popover的v-model绑定visible,那么要把visible这个绑定的prop名称放进数组的第二元素里面,第一个属性放传递给el-popover组件的变量名

    renderDropdown(h){
    	const show = "true"
    	// return <el-popover v-model:visible={show}>  //报错
    	return <el-popover v-model={[show, 'visible']}>
    		code...
    	</el-popover>
    }


    虽然 v-model 也能用,但是建议在 JSX 中使用驼峰 (vModel)

    修饰符:使用 (_) 代替 (.) (vModel_trim={this.test})


    // template<input v-model="val" />
    <input v-model:name="val">
    <input v-model.trim="val">
    <input v-model:name.trim="val">
    
    // tsx
    <input v-model={val} />
    <input v-model={[val, 'name']} />
    <input v-model={[val, ['trim']]} />
    <input v-model={[val, 'name', ['trim']]} />

    v-models

    // template
    <A v-model="foo" v-model:bar="bar" />
    
    // tsx
    <A v-models={[[foo], [bar, "bar"]]} />


    自定义指令

    const App = {
      directives: { antRef },
      setup() {
        return () => (
          <a
            vAntRef={(ref) => { this.ref = ref; }}
          />
        );
      },
    }

    没事可以去吃个瓜: https://github.com/vuejs/jsx/issues/141



    参考文章:

    Vue2的.sync修饰符转Vue3中v-model https://segmentfault.com/a/1190000039299633

    Vue3 jsx组件绑定自定义的事件、v-model使用 https://blog.csdn.net/RkHker/article/details/111375264

    在Vue 3中使用Typescript和Jsx https://segmentfault.com/a/1190000039936587



    转载本站文章《vue2升级vue3:Vue3时jsx组件绑定自定义的事件、v-model、sync修》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8697.html