织梦网站为什么容易被注入,润滑油网站怎样做效果更好,太原微网站建设,北京平台网站建设报价在父组件中#xff0c;如果需要获取子组件中的数据#xff0c;有两种方式#xff0c;一种是在子组件中自定义事件#xff0c;父组件绑定该事件#xff0c;当触发自定义事件时#xff0c;向父组件传入参数;另一种是先通过ref属性给子组件命名#xff0c;然后在父组件中就…在父组件中如果需要获取子组件中的数据有两种方式一种是在子组件中自定义事件父组件绑定该事件当触发自定义事件时向父组件传入参数;另一种是先通过ref属性给子组件命名然后在父组件中就可以调用$refs对象访问命名的子组件中数据。
子组件自定义事件传参
父组件通过绑定子组件中自定义的事件在触发的事件中获取传入的数据这种方式是子组件向父组件传参的重要方式接下来通过一个实例来演示它实现的过程。
实例7-2 子向父组件传参
1. 功能描述
在实例7-1的基础之上向子组件的视图中添加一个“长度”按钮当点击该按钮时获取父组件传入数据的长度并通过自定义的事件将该长度值传递给父组件父组件接收该值后显示在页面中。
2. 实现代码
在项目的components 文件夹中添加一个名为“Parent”的.vue文件该文件的保存路径是“components/ch7/part2/”在文件中加入如清单7-3所示代码。
代码清单7-3 Parent.vue代码
templatediv classiframediv classi-leftspan父组件/spaninput v-modelname placeholder请输入用户名 //divdiv classi-right{{ len }}/div/div!-- 在父组件中调用子组件 --Child :inputNamename getLengthonGetLength /
/template
script
import Child from ./Child.vue
export default {data() {return {name: ,len: 0}},components: {Child},methods: {onGetLength(data) {this.len data}}
}
/script
style
.iframe {width: 300px;display: flex;justify-content: space-between;align-items: center;padding: 8px;border: solid 1px #ccc;
}.i-left {display: flex;align-items: center;
}.iframe input {padding: 8px;
}.iframe:last-child {border-top: none;padding: 16px 8px;background-color: #eee;
}
/style
在父组件中导入并注册了一个名称为Child的子组件它的功能是通过自定义的事件向父组件传递数据并将该数据显示在视图模块中它的代码如清单7-4所示。
代码清单7-4 Child.vue代码
templatediv classiframediv classi-leftspan子组件/spanspan{{ inputName }}/span/divdiv classi-rightbutton clickonGetLength长度/button/div/div
/template
script
export default {props: {inputName: {type: String,required: true}},emits: [getLength],methods: {onGetLength() {this.$emit(getLength, this.inputName.length)}}
}
/script
3. 页面效果
保存代码后页面在Chrome浏览器下执行的页面效果如图7-3所示。
4. 源码分析
在子组件Child的源码中为了能向父组件传递参数先在“emits”选项中定义一个名为“getLength”的事件当点击“长度”按钮时执行该事件同时将inputName数据的长度值作为事件携带的参数。
在父组件Parent的源码中为了能接收到子组件传入的参数则在调用子组件时绑定自定义的“getLength”事件并在事件执行时获取携带的参数值并将该值作为变量绑定到视图的元素中从而最终实现子组件向父组件传参的过程。
需要说明的是自定义事件携带的参数可以是一个变量也可以是一个对象如果需要传递多项数据则可以借助对象的形式向父组件传递。
