vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
2023-09-11 14:21:28 时间
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue 父组件与子组件相互通信 一、父组件给子组件传值 props 实现父组件向子组件传值。 1父组件里: <child-pack :msg ="myMsg" v-on:listenTochildEvent="showMessageFromChild"></child-pack> msg是绑定的自定义属性,类似我们原生html 给标签自定义属性一样,Widget是传输变量 <script > import childpack from './childPack.vue' //引用子组件 export default{ name: 'FatherPack', components: { childpack }, data(){ return(){ myMsg:‘我是父组件参数’ } }, mothods:{ } } </script> 2子组件里: <div> <span>{{msg}}</span> </div> export default { name: 'ChildPack', props:["msg"] //也可以指定默认类型和默认值 // props: { // msg: { // type: Number, // default: 0 // } // },
// isPublic: {
// type: Boolean,
// default: undefined //注意!对于布尔类型,默认值不要写成false,否则isPublic永远为false。
// }
data(){ }, created() { console.log('child_msg',this.msg) }, mothods:{ }, } 二、子组件传值到父组件 this.$emit() 实现子组件向父组件传值。 1在子组件里: export default{ methods: { changeFather(){ this.$emit("listenTochildEvent","我是子组件的参数"); }, //可以传递参数,参数可以是值、对象、数组等类型。 // changeFather(pms){ // this.$emit("listenTochildEvent",pms); // }, } } 2在父组件:定义事件listenTochildEvent,并实现showMessageFromChild方法,接收父组件传递来的参数。 <child-pack :msg ="myMsg" v-on:listenTochildEvent="showMessageFromChild"></child-pack> <script > import childpack from './childPack.vue' //引用子组件 export default{ name: 'FatherPack', components: { childpack }, data(){ return(){ myMsg:‘我是父组件参数’ } }, mothods:{ showMessageFromChild(data){ console.log(data); } } </script> 三、将一、二 一起使用就是可以实现父子组件互相传值。
知识点:props 、$emit()
参考来源: https://blog.csdn.net/github_37847992/article/details/78167337
vue文档:http://doc.vue-js.com/v2/api/#vm-emit
https://cn.vuejs.org/v2/guide/components-props.html#Prop-类型
相关文章
- Vue笔记:vue项目引入bootstrap、elementUI、echarts
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- Vue+ElementUI项目使用webpack输出MPA【华为云分享】
- Vue -> 解决 vue-ueditor-wrap 不能显示的问题
- vue-cli3实现分环境打包步骤(给不同的环境配置相对应的打包命令)
- [Vue-rx] Cache Remote Data Requests with RxJS and Vue.js
- vue3:vue+nginx+php进行服务端部署的配置(nginx/1.18.0 / vue@3.2.37)
- vue.js3: 旋转图片并保存(vue@3.2.37)
- vue商城项目开发:底部导航菜单(路由)
- Vue入门教程:node安装vue命令行工具及启动项目
- vue项目elementui 的 el-checkbox复选框改成单选框样式:实现全选、全否、单选、反选功能(最简单的方法)
- 怎么获取vue项目的配置项?比如获取ip地址和端口
- 怎样使用vue cli脚手架工具快速搭建vuejs项目和配置文件的具体步骤
- 使用nodejs&webpack&vue-cli脚手架工具搭建项目
- echarts在Vue项目中的实际运用效果图
- vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
- 191:vue+openlayers 选择feature,固定按钮删除selected feature
- 008:vue+openlayers加载6种形式google地图(代码示例)
- VUE API 重点
- 开始创建一个 Vue 项目
- Vue(八)vue 脚手架、脚手架创建项目示例
- WebStorm配置启动Vue项目
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例