vue组件传递参数,vue组件如何进行参数传递
本文主要详细介绍vue组件的值传递。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
序实施思路例1:通过世代相传例2:从儿子到父亲总结
前言
大家应该都很熟悉vue中组件的价值传递。今天我们就用两个简单易懂的案例来教大家如何在项目中使用父子组件和父子组件之间的数据传递。
实现思路
父传子：将一个属性绑定到父组件中子组件的标签上，挂载要在属性上传递的值，通过props:[自定义属性名]接收子组件中的数据。子传父：在子组件中自定义事件。调用此事件后，子组件通过this.$emit(自定义事件名,要传递的数据)发送父组件可以侦听的数据。最后，父组件监听子组件事件，调用事件并接收传递的数据。话不多说，下面进入实战
实例1：父传子
这个小例子主要模拟父组件向不同子组件传输不同数据的情况。
父组件 index.vue
模板
！-父组件-
差异
Child:message= inform tion v-if= typeCode== 0 /Child
电子：message= dataList v-if= typeCode== 1 /电子
/div
/模板
脚本
//引入子组件
从导入子级。/subassembly/seed . vue ；
从导入电子邮件。/subassembly/sons . vue ；
导出默认值{
data() {
返回{
TypeCode:“0”，//通过“0”“1”确定显示哪个页面；0:子组件1页；1:子组件2页面
信息：我是传递给子组件1的数据，//要传递给子组件1的数据
DataList:我是传递给子组件2的数据，//要传递给子组件2的数据
};
},
//确保注册该组件
组件：{
孩子，
电子的，
},
};
/脚本
构成部分1 seed.vue
模板
！-组件1-
H2我是子组件1br/接收父组件值：{{{ informtion }}/h2
/模板
脚本
导出默认值{
data() {
返回{
信息：，//用于赋值
};
},
道具：{
//消息用于接收
消息：{
Type: String，//验证类型，或者其他类型。
默认值： ，//如果父组件传递了一个值，将使用父组件的值进行渲染，否则将使用默认值。
},
},
已安装(){
console . log(this . message)；//父组件传递的数据
//赋值操作
让str=this.message
this.informtion=str
},
};
/脚本
构成部分2 sons.vue
模板
！-组件2-
H2我是子组件2br/接收父组件值：{{ dataList }}/h2
/模板
脚本
导出默认值{
data() {
返回{
数据列表： ，//用于赋值
};
},
道具：{
//消息用于接收
消息：{
Type: String，//验证类型，或者其他类型。
默认值： ，//如果父组件传递了一个值，将使用父组件的值进行渲染，否则将使用默认值。
},
},
已安装(){
console . log(this . message)；//父组件传递的数据
//赋值操作
让str=this.message
this.dataList=str
},
};
/脚本
实现效果
当1. 当typeCode为“0”时，页面内容如下：
当2. 当typeCode为“1”时，页面内容如下：
实例2：子传父
这个小例子主要模拟不同子组件向父组件传输数据的情况。
Seed.vue子组件1
模板
！-组件1-
按钮@click=seedOnclick 我是子组件1/按钮
/模板
脚本
导出默认值{
data() {
返回{
seedCode:“浪漫永不消逝！”，//传递父级要传递的值。
};
},
方法：{
seedOnclick() {
这个。$emit(seed ，this . seed code)；//参数1:自定义事件；参数2:要传递的值
},
},
};
/脚本
Sons.vue组件2
模板
！-组件2-
Button @click=sonsOnclick 我是子组件2/button
/模板
脚本
导出默认值{
data() {
返回{
dataListCode:“世界和平！”，//传递父级要传递的值。
};
},
方法：{
sonsOnclick() {
这个。$emit(sons ，this . datalistcode)；//参数1:自定义事件；参数2:要传递的值
},
},
};
/脚本
index.vue的父组件
模板
！-父组件-
差异
Child @ seed= seed accept v-if= typeCode== 0 /Child
电子@ sons= sons accept v-if= type code== 1 /电子
/div
/模板
脚本
//引入子组件
从导入子级。/subassembly/seed . vue ；
从导入电子邮件。/subassembly/sons . vue ；
导出默认值{
data() {
返回{
TypeCode:“0”，//通过“0”“1”确定显示哪个页面；0:子组件1页；1:子组件2页面
};
},
//确保注册该组件
组件：{
孩子，
电子的，
},
方法：{
参见接受(数据){
Console.log(数据，“从子组件1传递到父组件的值”)；
},
sons接收(数据){
Console.log(data，从子组件2传递到父组件的值)；
},
},
};
/脚本
实现效果
当1. 当typeCode为“0”时，页面内容如下：
当2. 当typeCode为“1”时，页面内容如下：
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。