创意网站模板下载,婚纱网站页面设计,网站开发流程心得体会,网站错位组件之间的传值
1、父传子 props
2、父传子 slot
3、父传子 不建议用 attrs
4、 子传父 ref
5、子传父 emit
6、povide/inject只能在setup的时候用。
7、利用vuex和pinia去实现数据的交互 1、实现代码App.vue script setupimport TestProps from ./components/T…组件之间的传值
1、父传子 props
2、父传子 slot
3、父传子 不建议用 attrs
4、 子传父 ref
5、子传父 emit
6、povide/inject只能在setup的时候用。
7、利用vuex和pinia去实现数据的交互 1、实现代码App.vue script setupimport TestProps from ./components/TestProps.vue;
import TestEmit from ./components/TestEmit.vue;
import TestProvideInject from ./components/TestProvideInject.vue;
import TestRef from ./components/TestRef.vue;
import TestAttrs from ./components/TestAttrs.vue;
import TestSlot from ./components/TestSlot.vue;import { createApp, provide, reactive, ref } from vue;const mm ref(父值 test);
const pmsg 父值 test
function pcallback()
{console.log(pcallback);
}function pEmitclicked(m)
{console.log(pEmitclicked m);
}function pclicked()
{console.log(pclicked );provide(user,test1)}
//provide() can only be used inside setup().
provide(user,test)
provide(userObj,{a:b})
provide(userFunc,(){return aaa})let testref ref();
function prefClicked()
{console.log(title:, testref.value.title);console.log(msg:, testref.value.msg);testref.value.func();testref.value.title sssssss;
}
/scripttemplatedivp父传子 props/pp子传父 emit/pp povide/inject只能在setup的时候用/pp子传父 ref/pp父传子 不建议用 attrs/pp父传子 slot/p/divdivTestProps/TestPropsTestProps :messagepmsg/TestPropsTestProps message我是传值 :callbackpcallback/TestProps/divdivpemit/pbutton clickpEmitclickedpEmitclicked/buttonTestEmit subemitpEmitclicked/TestEmit/divdiv pprovide/inject/pbutton clickpclickedprovide/inject/buttonTestProvideInject/TestProvideInject/divdiv pRef/pbutton clickprefClickedref/buttonTestRef reftestref/TestRef/div div pattrs/pTestAttrs msgtest msg22222/TestAttrs/divdivpslot/pTestSlot/TestSlotTestSlot {{ mm }}/TestSlot TestSlottemplate v-slot:headerh1Here header title/h1/template/TestSlot/div /templatestyle scoped/style2、TestProps.vue templateh3props/h3a{{ msg }} : {{ message }}/abutton clickcallback_p调用函数/button
/templatescript
import { ref } from vue
export default {props : {message : {type : String,required: true,default : default message ,},obj : { type: Object,// 对象或数组默认值必须从一个工厂函数获取default() {return { message: hello }}},callback : {type: Function,// 与对象或数组默认值不同这不是一个工厂函数 —— 这是一个用作默认值的函数default() {console.log(default clicked);return Default function}}},setup(props) //需要传值{const msg ref(提示);function callback_p(){props.callback();}return {msg,callback_p};}
}
/script !-- script setup
import { ref } from vue;
const msg ref(提示);//需要自己定义props
const props defineProps({message : {type : String,required: true,default : default message ,},obj : {type : Object},aryobj : {type : Array,default : []},callback : {type : Function,default() {console.log(default clicked);return function}}
})function callback_p()
{props.callback();
}/script --
3、TestAttrs.vue
template div{{ msg }} {{ attrs.msg2 }}/div
/templatescript
import { ref, useAttrs } from vue;
export default {inheritAttrs: true,setup(props, context){const msg ref(msg1);const attrs context.attrs;return {msg, attrs}},
}
/script !-- script setup
import { ref, useAttrs } from vue;const msg ref(msg1);
const attrs useAttrs();console.log(attrs:,attrs);/script --4、TestSlot.vue
template divslotdefaut slot/slotslot nameheader/slot/div
/template 5、TestRef.vue
templateh3{{ title }}/h3
/template!--
script
import { ref } from vue;
export default {setup(){const title ref(title);const msg ref({title:aaa});function func(){console.log(func);}return {title, msg, func}}
}
/script --script setup
import { ref } from vue;const title ref(title);
const msg ref({title:aaa
})function func()
{console.log(func);
}defineExpose({title,msg,func
})/script
6、TestEmit.vue
templateh3emit/h3div{{ msg }}button clickclicked子传父/button/div/template!-- script
import { ref } from vue;
export default {emits : {subemit : function(str){console.log(subemit str);//msg.value str;return true;}},methods : {clicked : function clicked(){console.log(clicked );this.$emit(subemit, this.msg);}},setup(){const msg ref(msg);//这里声明无效需要用methodsfunction clicked1(){console.log(kkk);this.$emit(subemit, this.msg.value);}return {msg,clicked1}}}
/script --script setup
import { ref } from vue;
const msg ref(msg);const emits defineEmits({subemit : function(str){console.log(subemit str);return true;}
})function clicked()
{console.log(clicked );emits(subemit, msg.value);
}/script
style/style7、TestProvideInject.vue
templatedivinject provide test {{ puser }}/divbutton clickpbtest/button
/template!-- script langts
import { ref } from vueexport default {setup() {const msg ref(msgtest);return {msg}},methods : {pb : function(){console.log(this.msg);this.$emit(subemit, this.msg);}},emits : {subemit : function(str){console.log(subemit str);return true; //要有返回值不然有warning}}}
/script --script setup
import { inject, ref } from vueconst msg ref(msgtest);const puser inject(user);
const puserObj inject(userObj);
const userFunc inject(userFunc);console.log(puser, puserObj, userFunc())/script 8、终极方法vuex和pinia 参考
Vue组件之间数据通信12种方式_vue组件间通信_小胖梅前端的博客-CSDN博客
vue组件间通信的六种方式完整版_vue的组件之间是如何交互的, 几种方式_学编程的ADD的博客-CSDN博客
