网站代码关键词标题,网站跳出率高的原因,做期权关注哪个网站,怎么给网站绑定域名文章目录 一、父组件数据传递N个层级的子组件vue3 provide 与 injectA组件名称 app.vueB组件名称 provideB.vueC组件名称 provideCSetup.vue 二、使用v-model指令实现父子组件的双向绑定父组件名称 app.vue子组件名称 v-modelSetup.vue 三、父组件props向子组件传值子组件 prop… 文章目录 一、父组件数据传递N个层级的子组件vue3 provide 与 injectA组件名称 app.vueB组件名称 provideB.vueC组件名称 provideCSetup.vue 二、使用v-model指令实现父子组件的双向绑定父组件名称 app.vue子组件名称 v-modelSetup.vue 三、父组件props向子组件传值子组件 propsSetup.vue父组件 app.vue 四、子组件emit向父组件传值vue3 events 事件子组件eventsSetup.vue 定义事件父组件app.vue接收子组件eventsSetup.vue的done事件 五、通过expose和ref来实现父组件调用子组件的方法父组件 app.vue子组件名称 child.vue 一、父组件数据传递N个层级的子组件
vue3 provide 与 inject
我们通过props属性可以把数据传给组件而通过provide与inject我们可以把数据传递给N个层级的子组件比如A组件用了B组件B组件用了C组件它可以把组件直接从A传给C组件,vue2使用computed来实现响应式,而vue3中 provide 使用ref或reactive定义的变量即可实现响应式。
A组件传入值,传入了userInfo对象不用管传给谁了谁谁都可以去接收key为provideCount的数据
A组件名称 app.vue
!-- A组件名称 app.vue --
templatediv classitxstlabelA组件显示{{state.userInfo.count}}/label!-- 我是A组件调用了B组件,我可以把值传给B或C组件 --bcomp //div
/templatescript setup
//导入 provide
import { reactive,provide } from vue;
import bcomp from ./provideB.vue;
//定义需要传递的对象
const statereactive({userInfo:{count:1}})
//定了 provide 的 key 和 要传递的值
provide(provideCount,state.userInfo);
/scriptB组件调用C组件,但是我啥也没干
B组件名称 provideB.vue
!-- B组件名称 provideB.vue --
templatediv classb!-- 我是B组件调用了C组件 --ccomp//div
/templatescript setup
import { reactive } from vue;
import ccomp from ./provideCSetup.vue;
/scriptC组件获取A组件传入的值,我修改了userInfo的值A组件也会跟着变哦。
C组件名称 provideCSetup.vue
!-- C组件名称 provideCSetup.vue --
templatediv classc!-- 我是C组件获取了A组件的值 --div C组件显示 {{ userInfo.count }}/div /div
/templatescript setup
import { inject, reactive } from vue;
//获取 provide 传入的值
const userInfo inject(provideCount);//测试响应式
setInterval(function(){userInfo.countuserInfo.count1},1000)
/script二、使用v-model指令实现父子组件的双向绑定
v-model是vue3的一个内置指令可以实现父组件变量(不能是常量)与子组件属性的双向绑定我们在很多知名的开源库可以看到这个命令,比如我们要实现一个弹窗组件需要父组件和子组件都可以操作这个变量来实现隐藏显示统一步调。
a-modal v-model:visiblevisible titleBasic Modal okhandleOk
!-- ant design 弹窗组件使用了 v-model 指令 --
/a-modal父组件名称 app.vue
在父组件中使用v-model指令将子组件的某个prop绑定到父组件的某个变量上
templatediv classitxst!-- 自定义v-model 名称--demo v-model:showstate.show v-model:messagestate.message/demobutton clickshowDlg点击弹窗/button /div
/templatescript setup
import { reactive } from vue;
import demo from ./v-modelSetup.vue;
//定义要使用v-model的变量show和message
const state reactive({show: false,message: https://www.itxst.com,
});//按钮事件我们改变show的值
const showDlg () {state.show true;
};
/scriptv-modelSetup.vue子组件实现修改v-model的值属性值
子组件名称 v-modelSetup.vue
在子组件中将子组件的某个prop绑定到子组件的某个变量上并在该变量上使用计算属性或观察者监听该prop的变化
templatediv classitxst v-ifshowdiv{{ message }}/divdivbutton clickok确定/button/div/div
/templatescript setup
import { ref, reactive } from vue;
// 定义了 show 和 message 属性
const props defineProps({show: {type: Boolean,default: false,},message: {type: String,default: ,},
});//修改属性的值,定义emits可修改 show 和 message 属性
const emits defineEmits([update:show, update:message]);//确定按钮的事件
const ok () {//关闭弹窗emits(update:show, false);
};
/scriptstyle scoped
/* 样式省略请在试一试中查看 */
/style三、父组件props向子组件传值
vue3 通过 props 来定义属性我们可以通过属性将值传给自定义组件比如颜色、高度宽度等等定义属性时我们也可以定义类型和默认值,本文重点描述了如何定义属性和修改属性的值。
子组件 propsSetup.vue
!-- 子组件 propsSetup.vue --
templatediv classitxstdiv :style{ color:props.color }{{msg}}/div!--绑定属性--input :style{ color:props.color ,height:props.heightpx} inputonInput / /div/templatescript setup import { ref, reactive } from vue;/** 定义组件的属性* type 表示属性类型* default 表示默认值*/const props defineProps({msg: {type: String,default: www.itxst.com,},color: {type: String,default: #000,},height:{type:Number,default:120,}});/*也可以通过数组方式定义属性,缺点是不能定义类型和默认值const props defineProps([msg,color]);*//scriptstyle scoped
/style使用该自定义组件
父组件 app.vue
!-- 父组件 app.vue --
template!-- 传入了color和height属性 --demo colorred :height30/
/template
script setup
import { ref, reactive } from vue;
// 导入组件,因为是setup语法糖所以无需手动注册组件
// demo为当前页的组件名称你可以随便取名 ./components/propsSetup.vue 是组件的路径
import demo from ./components/propsSetup.vue;
/script四、子组件emit向父组件传值
vue3 events 事件
事件是组件开发中必不可少的部分事件就是当你完成了某个任务后你把这个事情告诉别人的动作比如你在组件中保存成功了数据等等本文将介绍任何在vue3中定义事件以及调用者任何接收这个事件。
子组件eventsSetup.vue 定义事件
templatediv classitxst!--子组件eventsSetup.vue 定义事件演示-- input typetext v-modelmsg /input typebutton value点击试试 clickonDone//div
/templatescript setup langts import { ref } from vue;const msgref(www.itxst.com);//定义一个点击完成事件 done 和 sent 两个事件const emits defineEmits([done,sent]);//TS模式 定义emits/*const emits defineEmits{(event: done, msg: String): void;(event: sent): void;}();*/const onDone(){//触发done事件请把用户输入的值msg传出去emits(done, msg.value);//也可以不传参数//emits(sent);}
/scriptstyle scoped
.itxst{display: inline-block;padding: 6px;
}
/style父组件app.vue接收子组件eventsSetup.vue的done事件
templatediv{{text}}/div!--接收组件里面的done事件--demo doneonDone/
/templatescript setup import { ref } from vue;import demo from ./eventsSetup.vueconst textref();//接收组件里面的done事件const onDone(msg){text.value你输入了msg;}
/scriptstyle scoped
/style五、通过expose和ref来实现父组件调用子组件的方法
vue3父组件调用子组件的方法是通过expose和ref来实现的我们可以通过expose来控制父组件可以访问子组件那些的方法和对象我们将通过setup api(组合式 api)和option api(选项式 api)来演示父组件如何调用子组件的方法。
父组件 app.vue
!-- 父组件 app.vue --
templatediv classitxst!-- 使用 ref 指令关联子组件 --child refchildComp/button clickonTry点击试一试/button/div
/templatescript setup
import { reactive, ref } from vue;
import child from ./child.vue;
//定义子组件实例名称要和上面的ref相同
const childComp ref(null);//访问demo组件的方法或对象
const onTry () {//获取到子组件的 title 数据 let msg childComp.value.state.title;//调用子组件的 play方法childComp.value.play();
};
/script子组件名称 child.vue
!--子组件名称 child.vue --
templatediv classitxst{{ state.title }}/div
/templatescript setup
import { ref, reactive } from vue;
//定义一个变量
const state reactive({title: www.itxst.com,
});
//定义一个方法
const play () {state.title 你调用了子组件的方法;
};//暴露state和play方法
defineExpose({state,play,
});
/script
