vue3.0 组件传值,vue组件传值
学习过vue2的宝子们肯定知道，组件传值是某视频剪辑软件项目开发过程中必不可少的功能场景，在vue2里面有很多传值的方式。今天就来和大家讲讲Vue3的组件传值方式，需要的可以参考一下
目录
父子组件传值小道具祖孙组件传值提供和注射父组件中点击按钮向子组件传值今天说一下vue3的组件间传值，学习过vue2的宝子们肯定知道，组件传值是某视频剪辑软件项目开发过程中必不可少的功能场景，在vue2里面有很多传值的方式，vue3的传值方式呢，在这里稍微整理总结一下，但是不是很全，后期可能慢慢补充。
父子组件传值 props
和vue2一样，vue3也可以使用小道具进行父组件传值给子组件，这个就不多说了直接上代码。
父组件
模板
差异
div class=父亲
氕这是父组件/h1
氘父组件的名字：{{boy.name}}/h2
/div
hello-world:msg= msg :boy= boy @ change= BTN /hello-world
/div
/模板
脚本
从导入你好世界./components/hello world。vue ；
从“vue”导入{ ref，reactive }；
导出默认值{
名称："应用程序",
组件：{
编译
},
setup() {
const boy=reactive({
名称： 我是.,
年龄：10岁
});
const msg=ref(这是一条信息);
const btn=val={
控制台。日志(val)；
警报(val)；
};
返回{男孩，味精，BTN }；
}
};
/脚本
样式范围。父亲{
背景色：海蓝宝石；
}
/风格
子组件
模板
儿子
氕这是子组件/h1
氘这是父组件传进的数据：{{msg}}/h2
氘这是父组件传进的数据：{{boy.name}}/h2
button @click=btn 传给父组件数据/按钮
/div
/模板
脚本
从“vue”导入{ tore fs }；
导出默认值{
名称：“HelloWorld”，
道具：{
消息：字符串，
男孩：反对
},
设置（道具，{ emit }) {
console.log(道具);
const p=tore fs(道具)；
常量消息=p.msg
常数男孩=p。男孩；
常量btn=()={
const news=我是子组件传进的值；
发出(变，新闻);
};
返回{味精，小子，BTN }；
}
};
/脚本
样式范围。儿子
背景色：浓汤；
}
/风格
保存查看效果。
上面就是小道具传值的基本用法。
祖孙组件传值 provide 和 inject
这个其实和vue2的写法是一模一样的。
直接上代码！
父组件
模板
差异
div class=父亲
氕这是父组件/h1
氘名字：{{boy.name}}/h2
氘年龄：{{boy.age}}/h2
/div
你好世界/你好世界
/div
/模板
脚本
从导入你好世界./components/hello world。vue ；
从“vue”导入{反应式，提供}；
导出默认值{
名称："应用程序",
组件：{
编译
},
setup() {
const boy=reactive({
名称： 我是.,
年龄：10岁
});
提供(男孩，男孩);//往子孙组件传值
返回{ boy }；
}
};
/脚本
样式范围。父亲{
背景色：海蓝宝石；
}
/风格
子组件
模板
儿子
氕这是子组件/h1
氘这是父组件传进的数据：{{boy.name}}/h2
氘这是父组件传进的数据：{{boy.age}}/h2
/div
/模板
脚本
从“vue”导入{ toRefs，inject }；
导出默认值{
名称：“HelloWorld”，
setup() {
const boy=inject( boy )；//子孙组件接收值
返回{ boy }；
}
};
/脚本
样式范围。儿子
背景色：浓汤；
}
/风格
刷新看一下效果。
好的，我们可以看到子组件可以顺利拿到父组件传进来的数据值。
父组件中点击按钮向子组件传值
就是使用裁判员来获取数字正射影像图然后操作里面的参数和方法。
父组件
模板
差异
div class=父亲
氕这是父组件/h1
氘名字：{{boy.name}}/h2
氘年龄：{{boy.age}}/h2
button @click=btn 传值/按钮
/div
hello-world ref= hello style= color:red /hello-world
/div
/模板
脚本
从导入你好世界./components/hello world。vue ；
从“vue”导入{ reactive，ref }；
导出默认值{
名称："应用程序",
组件：{
编译
},
setup() {
const boy=reactive({
名称： 我是.,
年龄：10岁
});
const hello=ref()；
函数btn() {
你好。价值。init(男生)；//调用子组件的方法，把男孩对象传进去
}
返回{ boy，btn，你好}；
}
};
/脚本
样式范围。父亲{
背景色：海蓝宝石；
}
/风格
子组件
模板
儿子
氕这是子组件/h1
氘这是父组件传进的数据：{{boy.name}}/h2
氘这是父组件传进的数据：{{boy.age}}/h2
/div
/模板
脚本
从“vue”导入{ reactive，tore fs }；
导出默认值{
名称：“HelloWorld”，
setup() {
let boy=reactive({
名字："艾德。",
年龄：11岁
});
//提供给父组件调用的方法
const init=val={
好家伙。name=val。姓名；
好家伙。年龄=val。年龄；
};
返回{ init，男孩}；
}
};
/脚本
样式范围。儿子
背景色：浓汤；
}
/风格
以上就是深入了解Vue3组件传值方式的详细内容，更多关于Vue3组件传值的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。