深入了解Vue3组件传值方式
作者：ed。
学习过 vue2 的宝子们肯定知道，组件传值是 vue 项目开发过程中必不可少的功能场景，在 vue2 里面有很多传值的方式。今天就来和大家讲讲Vue3的组件传值方式，需要的可以参考一下
今天说一下 vue3 的组件间传值，学习过 vue2 的宝子们肯定知道，组件传值是 vue 项目开发过程中必不可少的功能场景，在 vue2 里面有很多传值的方式，vue3 的传值方式呢，在这里稍微整理总结一下，但是不是很全，后期可能慢慢补充。
父子组件传值 props
和 vue2 一样，vue3 也可以使用 props 进行父组件传值给子组件，这个就不多说了直接上代码。
父组件
<template>
<div>
<div class="father">
<h1>这是父组件</h1>
<h2>父组件的名字：{{boy.name}}</h2>
</div>
<hello-world :msg="msg" :boy="boy" @change="btn"></hello-world>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
import { ref, reactive } from "vue";
export default {
name: "App",
components: {
HelloWorld
},
setup() {
const boy = reactive({
name: "我是𝒆𝒅.",
age: 10
});
const msg = ref("这是一条信息");
const btn = val => {
console.log(val);
alert(val);
};
return { boy, msg, btn };
}
};
</script>
<style scoped>
.father {
background-color: aquamarine;
}
</style>子组件
<template>
<div class="son">
<h1>这是子组件</h1>
<h2>这是父组件传进的数据: {{msg}}</h2>
<h2>这是父组件传进的数据: {{boy.name}}</h2>
<button @click="btn">传给父组件数据</button>
</div>
</template>
<script>
import { toRefs } from "vue";
export default {
name: "HelloWorld",
props: {
msg: String,
boy: Object
},
setup(props, { emit }) {
console.log(props);
const p = toRefs(props);
const msg = p.msg;
const boy = p.boy;
const btn = () => {
const news = "我是子组件传进的值";
emit("change", news);
};
return { msg, boy, btn };
}
};
</script>
<style scoped>
.son {
background-color: bisque;
}
</style>保存查看效果。
上面就是 props 传值的基本用法。
祖孙组件传值 provide 和 inject
这个其实和 vue2 的写法是一模一样的。
直接上代码！！
父组件
<template>
<div>
<div class="father">
<h1>这是父组件</h1>
<h2>名字：{{boy.name}}</h2>
<h2>年龄：{{boy.age}}</h2>
</div>
<hello-world></hello-world>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
import { reactive, provide } from "vue";
export default {
name: "App",
components: {
HelloWorld
},
setup() {
const boy = reactive({
name: "我是𝒆𝒅.",
age: 10
});
provide("boy", boy); // 往子孙组件传值
return { boy };
}
};
</script>
<style scoped>
.father {
background-color: aquamarine;
}
</style>子组件
<template>
<div class="son">
<h1>这是子组件</h1>
<h2>这是父组件传进的数据: {{boy.name}}</h2>
<h2>这是父组件传进的数据: {{boy.age}}</h2>
</div>
</template>
<script>
import { toRefs, inject } from "vue";
export default {
name: "HelloWorld",
setup() {
const boy = inject("boy"); // 子孙组件接收值
return { boy };
}
};
</script>
<style scoped>
.son {
background-color: bisque;
}
</style>刷新看一下效果。
好的，我们可以看到子组件可以顺利拿到父组件传进来的数据值。
父组件中点击按钮向子组件传值
就是使用 ref 来获取dom 然后操作里面的参数和方法。
父组件
<template>
<div>
<div class="father">
<h1>这是父组件</h1>
<h2>名字：{{boy.name}}</h2>
<h2>年龄：{{boy.age}}</h2>
<button @click="btn">传值</button>
</div>
<hello-world ref="hello" style="color: red"></hello-world>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
import { reactive, ref } from "vue";
export default {
name: "App",
components: {
HelloWorld
},
setup() {
const boy = reactive({
name: "我是𝒆𝒅.",
age: 10
});
const hello = ref();
function btn() {
hello.value.init(boy); // 调用子组件的方法,把boy对象传进去
}
return { boy, btn, hello };
}
};
</script>
<style scoped>
.father {
background-color: aquamarine;
}
</style>子组件
<template>
<div class="son">
<h1>这是子组件</h1>
<h2>这是父组件传进的数据: {{boy.name}}</h2>
<h2>这是父组件传进的数据: {{boy.age}}</h2>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
export default {
name: "HelloWorld",
setup() {
let boy = reactive({
name: "ed.",
age: 11
});
// 提供给父组件调用的方法
const init = val => {
boy.name = val.name;
boy.age = val.age;
};
return { init, boy };
}
};
</script>
<style scoped>
.son {
background-color: bisque;
}
</style>
以上就是深入了解Vue3组件传值方式的详细内容，更多关于Vue3组件传值的资料请关注脚本之家其它相关文章！