湖北网站建设服务,国外家居设计网站,vue 做的网站,网站开发需要什么人vue3 组件间通信的方式(setup语法糖写法)
1. Props方式
该方式用于父传子#xff0c;父组件以数据绑定的形式声明要传递的数据#xff0c;子组件通过defineProps()方法创建props对象#xff0c;即可拿到父组件传来的数据。
// 父组件
templatedivson…vue3 组件间通信的方式(setup语法糖写法)
1. Props方式
该方式用于父传子父组件以数据绑定的形式声明要传递的数据子组件通过defineProps()方法创建props对象即可拿到父组件传来的数据。
// 父组件
templatedivson :msgstate.msg //div
/templatescript setup langts
import son from ./son.vue;
import { reactive } from vue;
const state reactive({msg: 父组件的值
});
/script// 子组件
templatediv{{ msg }}/div
/templatescript setup langts
const props defineProps({msg: {type: String,default: }
});
/script
2. emit方式
emit方式也是Vue中最常见的组件通信方式该方式用于子传父。
// 父组件
templatedivson myClickhandleClick //div
/templatescript setup langts
import son from ./son.vue;
const handleClick val {console.log(val);
};
/script
// 子组件
templatedivbutton clickhandleClick点击/button/div
/templatescript setup langts
const emit defineEmits([myClick]);
const handleClick () {emit(myClick, 我是子组件的值);
};
/script
3、defineExpose
利用defineExposeref 可以得到组件里的方法和变量
// 父组件
templatedivson refsonRef /button clickhandleClick点击/button/div
/templatescript setup langts
import son from ./son.vue;
import { ref } from vue;
const sonRef ref(null);
const handleClick val {console.log(sonRef.value.msg);
};
/script
// 子组件
templatedivson/div
/templatescript setup langts
defineExpose({msg: 我是子组件
});
/script
4. provide/inject provide/inject是 Vue 中提供的一对 API。无论层级多深API 都可以实现父组件到子孙组件的数据传递。
// 父组件
templatedivson //div
/templatescript setup langts
import son from ./son.vue;
import { provide } from vue;
provide(msg, 我是父组件);
/script
// 子组件
templatediv{{ data }}/div
/templatescript setup langts
import { inject } from vue;
const data inject(msg);
/script
5、attrs
attrs可以接受除去 props、style、 class之外的属性。
// 父组件
templatedivson :msgstate.msg :hellostate.hello //div
/templatescript setup langts
import son from ./son.vue;
import { reactive } from vue;
const state reactive({msg: 我是父组件,hello: hello
});
/script
// 子组件
templatedivson/div
/templatescript setup langts
import { useAttrs } from vue;
const attrs useAttrs();
console.log(attrs.msg); // 我是父组件
/script
6. v-model方式
v-model不能严格成为数据的传递方式其实只是减少了代码量。
// 父组件
templatedivson v-model:msgstate.msg /{{ state.msg }}/div
/templatescript setup langts
import son from ./son.vue;
import { reactive } from vue;
const state reactive({msg: 我是父组件
});
/script
子组件需要emit一个叫update:xxx的事件再把需要更新的响应式数据传给emit方法的第二个参数即可。
// 子组件
templatedivsonbutton clickhandleClick点击/button/div
/templatescript setup langts
const props defineProps({msg: {type: String,default: }
});
console.log(props.msg);
// 子组件需要emit一个叫update:xxx的事件再把需要更新的响应式数据传给emit方法的第二个参数即可
const emit defineEmits([msg]);
const handleClick () {emit(update:msg, 我是子组件);
};
/script
7. Vuex / Pinia
Vuex 和 Pinia 是 Vue 3 中的状态管理工具使用这两个工具可以轻松实现组件通信具体的使用方法可以查阅官方文档。
Vuex官方文档
Pinia官方文档
