餐饮vi设计开题报告范文,沈阳网络seo公司,wordpress 图片缩小,登封市建设局网站vue2 以及 vue3 自定义组件使用 v-model使用默认值以及自定义事件
1. vue2 自定义组件的 v-model
vue2官网#xff0c;自定义组件官方解释#xff1a;一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件上代码代码中使用了 element-ui
子组件 使用默…vue2 以及 vue3 自定义组件使用 v-model使用默认值以及自定义事件
1. vue2 自定义组件的 v-model
vue2官网自定义组件官方解释一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件上代码代码中使用了 element-ui
子组件 使用默认 value 和input 事件 // dialog.vuetemplateel-dialogtitle提示:visible.syncvaluewidth30%:before-closehandleClosespan2222222/spanspan slotfooter classdialog-footerel-button clickhandleClose取 消/el-buttonel-button typeprimary clicksubmit确 定/el-button/span/el-dialog
/template
script
export default {props: {value: {type: Boolean,default: () false,},},methods: {// 取消handleClose() {// 弹窗关闭 默认的event事件为 inputthis.$emit(input, false);},// 提交submit() {},},
};
/script父组件使用
templatedivel-button typeprimary clickvisible true打开弹窗/el-button Dialog v-modelvisible/Dialog/div
/template
script
import Dialog from /components/dialog.vue;
export default {components: {Dialog,},data() {return {visible: false,};},methods:{changeDialog(data){console.log(data)this.text data},}
};
/script官方解释后半段自定义 prop 和 事件名 像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免
子组件
templateel-dialogtitle提示:visible.syncvisiblewidth30%:before-closehandleClosespan2222222/spanspan slotfooter classdialog-footerel-button clickhandleClose取 消/el-buttonel-button typeprimary clicksubmit确 定/el-button/span/el-dialog
/template
script
export default {model: {prop: visible,event: update, // 为了避免事件名称冲突 此处可以自定义方法名},props: {visible: {type: Boolean,default: () false,},},data() {return {};},methods: {// 取消handleClose() {// 使用自定义方法名 和上面这行代码效果一致this.$emit(update, false);},// 提交submit() {},},
};
/script父组件
templatedivel-button typeprimary clickvisible true打开弹窗/el-button Dialog v-modelvisible/Dialog/div
/template
script
import Dialog from /components/dialog.vue;
export default {components: {Dialog,},data() {return {visible: false,};},methods:{changeDialog(data){console.log(data)this.text data},}
};
/script2. vue3 自定义组件的 v-model
vue3官网自定义组件官方解释默认情况下v-model 在组件上都是使用 modelValue 作为 prop并以 update:modelValue 作为对应的事件上代码代码中使用了 element-plus
子组件 使用默认 modelValue 和 update:modelValue事件
// 子组件 dialog.vue
templateel-dialogv-modelprops.modelValuetitleTipswidth30%:before-closehandleClosespanThis is a message/spantemplate #footerspan classdialog-footerel-button clickhandleClose取消/el-buttonel-button typeprimary clicksubmit 确定 /el-button/span/template/el-dialog
/templatescript setup langts
// 接受数据
const props defineProps({modelValue: {type: Boolean,default: () false,},
});// 注册事件
const emit defineEmits([update:modelValue]);// 关闭
const handleClose () {emit(update:modelValue, false);
};
// 提交
const submit () {};
/script父组件
templatedivel-button text clickvisible true 打开弹窗 /el-button!-- 第一种方式 使用默认方式 --Dialog v-modelvisible/Dialog/div
/templatescript setup langts
import Dialog from /components/dialog.vue;
import { ref } from vue;const visible ref(false);
/script官方解释后半段自定义 prop 和 事件名 我们可以通过给 v-model 指定一个参数来更改这些名字
子组件
templateel-dialogv-modelprops.visibletitleTipswidth30%:before-closehandleClosespanThis is a message/spantemplate #footerspan classdialog-footerel-button clickhandleClose取消/el-buttonel-button typeprimary clicksubmit 确定 /el-button/span/template/el-dialog
/templatescript setup langts
// 接受数据
const props defineProps({visible: {type: Boolean,default: () false,},
});// 注册事件
const emit defineEmits([update:visible]);// 关闭
const handleClose () {emit(update:visible, false);
};
// 提交
const submit () {};
/script父组件
templatedivel-button text clickvisible true 打开弹窗 /el-button!-- 第二种方式 自定义props 名称为 visible --Dialog v-model:visiblevisible/Dialog/div
/templatescript setup langts namedebounceDirect
import Dialog from /components/dialog.vue;
import { ref } from vue;const visible ref(false);
/script以上就是vue2或者vue3 自定义组件 v-model 的使用
