1.props、emit
父给子组件vDoem传送属性foo，传送方法changeee
<template >
<div class="container">
<p @click="change">{
{
newObj.name.value}}</p>
<v-dome :foo="foo" @changeee="change"></v-dome>
</div>
</template>
<script>
import vDome from "./dome01.vue";
import {
ref, toRef, toRefs } from "vue";
export default {
setup() {
let obj = {
name: "alice", age: 12 };
let foo = ref({
name: "foo", age: 100 });
let newObj = toRefs(obj);
function change(q) {
newObj.name.value = "Tome";
console.log(q)
}
return {
newObj, change, foo };
},
components: {
vDome
}
};
</script>
<style scoped>
</style>
子组件接受属性，触发方法
子组件接受属性，触发方法
<template >
<div class="container">
<p>obj1====={
{
obj1}}</p>
<p>obj2====={
{
obj2}}</p>
<p>obj3====={
{
obj3}}</p>
<p>父组件传送的foo {
{
foo}}</p>
<button @click="emitChange">触发父级传送的事件</button>
</div>
</template>
<script>
import {
ref } from "vue";
export default {
props: ["foo"],
setup(p, {
emit }) {
const obj = ref({
obj1: "obj111", obj2: "obj222", obj3: "obj333" });
const emitChange = () => {
emit("changeee", "子组件传送给父组件changeeechangeee");
};
return {
...obj.value, emitChange };
}
};
</script>
<style scoped>
</style>
2.provide、inject
父级
<template >
<div class="container">
<v-dome ></v-dome>
</div>
</template>
<script>
import vDome from "./dome01.vue";
export default {
setup() {
},
components: {
vDome
},
provide: {
zjqqqqq: '这是从父级传送过来的一段话',
funn:(numlist)=>{
console.log(numlist)}
},
};
</script>
<style scoped>
</style>
子
<template >
<div class="container">
<p>obj1====={
{
obj1}}</p>
<p>obj2====={
{
obj2}}</p>
<p>obj3====={
{
obj3}}</p>
<p>父组件传送的zjqqqqq {
{
zjqqqqq}}</p>
<button @click="funn('子触发父传递事件')">改变 myNum</button>
</div>
</template>
<script>
import {
ref } from "vue";
export default {
setup(p, {
emit }) {
const obj = ref({
obj1: "obj111", obj2: "obj222", obj3: "obj333" });
return {
...obj.value };
},
inject: ["zjqqqqq", "funn"]
};
</script>s
<style scoped>
</style>
