vue父组件子组件传值 vue2和vue3子组件父组件之间的传值方法
在组件化开发的过程中难免会遇见 子组件和父组件之间的通讯那么这里讲关于vue2和vue3不同的通讯方式
先看一下vue2
- 父组件向子组件传递参数
父组件通过
:语法 其实就是v-bind 来传递参数子组件通过
props来获取父组件传递的方法
亿点小知识:子组件接收到数据之后，不能直接修改父组件的数据。会报错
// 父组件 parent 像子组件传递 msg 值 <template> <Children :datum="'我是父组件的数据'"></Children> </template> ---------------------------------------------------------------------------------- // 子组件 接收 父组件 传递的数据 export default { // 写法一 用数组接收 props:['datum'], // 写法二 用对象接收，可以限定接收的数据类型、设置默认值、验证等 props:{ datum:{ type:String, default:'这是默认数据' } }, mounted(){ console.log(this.datum)// 我是父组件的数据 }, }
- 子组件向父组件传递参数 （这里同时讲了父组件向子组件传递方法）
父组件通过
@语法 其实就是v-on 来传递方法子组件通过
$emit来获取父组件传递的方法 同时向父组件传递数据
<template> <Children @method="method"></Children> </template> <script> import Children from './Children'; export default { components: { Children }, methods: { method(data) { // 这里的 data 就是子组件传递的参数 如果参数拥有多个可以使用 ...语法获取参数 console.log(data);// 子组件传递的参数 } } }; </script> ---------------------------------------------------------------------------------- // 子组件 传递给 父组件数据 export default { methods: { childMethod() { // 子组件通过 $emit 获取父组件传递的方法，然后携带数据传给父组件 this.$emit('method',"我是子组件"); } } }
- 父组件使用子组件的方法
vue2.0里面父组件调用子组件的方法是通过
$refs实现的
//父组件 <template> <Children ref="child"></Children> </template> export default{ import Children from './Children' export default{ components:{ Children }, mounted:{ //调用子组件方法 这里要注意区分 child 是ref的名字 this.$refs.child.getData(val) //通过$refs找到子组件，并找到方法执行 } } }
以上就是 vue2 子组件父组件之间的通讯
vue3
相信能看懂 vue2的小伙伴 应该理解之间的通讯 这里我就直接在父组件和子组件进行通讯
- 父组件
<template> <Children :title="我是父组件" ref="childrenRef" @method="methodChildren"></Children > </template> <script lang="ts"> import Children from "./Children.vue" import { defineComponent, ref } from "vue" export default defineComponent({ components: { Children , }, setup() { let msg = ref("") let childrenRef = ref() // 通过ref获取 子组件的实例 let fun = () =>{ childrenRef.value.fatherFun()// 使用子组件的方法 } let methodChildren = (val) => { msg.value = val // 这里val获取子组件传递的值 } return { msg, methodChildren, } }, }) </script>
- 子组件
<template> <!-- 点击调用父组件的方法 --> <button @click="fatherMethod">点击</button> </template> <script lang="ts"> import { defineComponent } from "vue" export default defineComponent({ name: "Children", props: { title: { type: String, }, }, setup(props, {emit}) { const fatherMethod= () => { emit("method", "传值给父组件") } const fatherFun= () => { console.log("我是子组件的方法") } return { fatherMethod, } }, }) </script>
以上就是前端vue2和vue3组件之间的通讯感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…
