一、定义一个父组件和一个子组件(子组件嵌套在父组件中)

App.vue 中

<template><div id="app"><img alt="Vue logo" src="./assets/logo.png" /><!-- 使用组件 --><Parent></Parent></div>
</template><script>
//1、引入组件import Parent from "./components/Parent.vue";
export default {name: "App",components: {//2、注册组件Parent,},
};
</script>

父组件Parent.vue

<template>
<div><h1>父组件</h1><Son></Son>
</div></template><script>
import Son from "./Son.vue";
export default {components:{Son,},
}
</script><style></style>

子组件

<template><div><h1>Son组件</h1></div>
</template><script>
export default {};
</script><style>
</style>

二、Props传递数据(父传子)

1、使用Props数组方式传值

父组件：
msg1静态传值，msg2动态传值

<template>
<div><h1>父组件</h1><p>msg2:{{info}}</p><button @click="changeMsg2">改变msg2</button><Son msg1='Hello World' :msg2='info'></Son>
</div></template><script>
import Son from "./Son.vue";
export default {components:{Son,},data(){return{info:'Good Morning'}},methods:{changeMsg2(){this.info='Good Afternoon';}}
}
</script><style></style>

子组件

<template><div><h1>Son组件</h1><p>msg1:{{msg1}}</p><p>msg2:{{msg2}}</p></div>
</template><script>
export default {props:['msg1','msg2'],
};
</script><style>
</style>

点击按钮后即动态改变数据：

2、对象方式传值

父组件

<template>
<div><h1>父组件</h1><p>msg2:{{info}}</p><button @click="changeMsg2">改变msg2</button><Son msg1='Hello World' :msg2='info' :msg4="info4"></Son>
</div></template><script>
import Son from "./Son.vue";
export default {components:{Son,},data(){return{info:'Good Morning',info4:"Wo!"}},methods:{changeMsg2(){this.info='Good Afternoon';}}
}
</script><style></style>

子组件：

<template><div><h1>Son组件</h1><p>msg1:{{ msg1 }}</p><p>msg2:{{ msg2 }}</p><p>msg3:{{ msg3 }}</p><p>msg4:{{ msg4 }}</p><p>msg5:{{ msg5.message }}</p><p>msg6:{{ msg6[0] }}</p></div>
</template><script>
export default {props: {msg1: String,// 多个可能的类型msg2: [String, Number],msg3: {//带有默认值type: String,default: "Good Night",},msg4: {//必填的字符串  不填会报错type: String,required: true,},// 带有默认值的对象msg5: {type: Object,// 对象或数组的默认值必须从一个工厂函数返回default() {return { message: "hello" };}},// 带有默认值的数组msg6: {type: Array,// 对象或数组的默认值必须从一个工厂函数返回default() {return ["M", "A", "E"];},},},};
</script><style>
</style>

三、自定义事件(子传父)

语法：
子组件定义事件
this.$emit(自定义事件名,参数..)
父组件调用子组件上面接受自定义事件
<子组件 @自定义事件名=‘函数名’ ></子组件>

methods:{函数名(参数...){------}
}

父组件

<template>
<div><h1>父组件</h1><p>info1:{{info1}}</p><Son :info='info1' @getData='getData'></Son>
</div></template><script>
import Son from "./Son.vue";
export default {components:{Son,},data(){return {info1:"mae"}},methods:{getData(val){this.info1=val;}}
}
</script><style></style>

子组件

<template><div><h1>Son组件</h1><p>父组件数据info：{{msg}}</p><button @click="sendData">子向父传数据</button></div>
</template><script>
export default {data(){return{msg:"HelloWorld"}},methods:{sendData(){//抛出自定义函数this.$emit('getData',this.msg);}}};
</script><style>
</style>

点击按钮子向父传数据

【Vue】Props传递数据(父传子) 自定义事件(子传父)相关推荐

vue实现php传数据,vue+props传递数据怎样实现
这次给大家带来vue+props传递数据怎样实现,vue+props传递数据的注意事项有哪些,下面就是实战案例,一起来看一下. 在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传 ...
props传递对象_vue组件中使用props传递数据的实例详解
在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的. 一.基本用法组件不仅仅是 ...
Vue（07）——slot插槽和自定义事件
文章目录 Vue(07)--slot插槽和自定义事件 1.slot插槽 2.自定义事件 Vue(07)--slot插槽和自定义事件 1.slot插槽什么是插槽 Vue 实现了一套内容分发的 API, ...
vue-tinymce的使用，粘贴文件上传，自定义文件上传，改base64转换成上传到服务器返回url
vue-tinymce的使用,粘贴文件上传,自定义文件上传,改base64转换成上传到服务器返回url vue中使用 <vue-tinymcev-model="itemForm.con ...
Vue项目中使用props传递数据并允许子组件修改的方案
在项目中遇到了一个相关需求: 一个页面中为了能够使代码更加简洁和易于查看,将其分成了多个功能模块.此时多个功能模块都需要使用共同的一组数据进行展现或对其进行修改.此时考虑到Vue项目中的数据通信方式: ...
vue组件间通信传递数据的四种方式（路由传参、父子组件传参、兄弟组件传参、深层次传参）
前言: vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的,对于一些刚入门的伙伴来说可能就有些迷茫,感觉方式有很多种,但是总结起来又不知道应该怎么说,在下面的文章中,我结合自己的开发过程中经常 ...
使用props传递数据
基本用法组件不仅仅是把模板里的内容进行复用,更重要的是组件之间进行通信.通常父组件的模板中包含子组件,父组件正要向子组件传递数据或参数,子组件接收到后根据参数的不同来渲染不同的内容或执行操作,这个正 ...
android finish()传参数,48. (android开发) activity间传递数据（打开浏览器、拨号盘、传参）...
在 android 中多个 activity 中互相访问是常见的一种操作,比如:打开系统浏览器.显示系统拨号盘等等. 做这些操作的时候,自然是需要传递一些数据过去,比如:要打开的网址.要拨打的电话号码 ...
uniapp 数据统计，数据埋点，自定义事件埋点封装
本博文实现了uniapp的数据统计埋点的封装,可以自动统计页面的PV, UV,页面停留时长,不需要在每个页面的生命周期写统计(tabBar 的页面除外,tabBar 页面需要添加自定义事件) ...

【Vue】Props传递数据(父传子) 自定义事件(子传父)

文章目录

一、定义一个父组件和一个子组件(子组件嵌套在父组件中)

二、Props传递数据(父传子)

1、使用Props数组方式传值

2、对象方式传值

三、自定义事件(子传父)

【Vue】Props传递数据(父传子) 自定义事件(子传父)相关推荐

最新文章

热门文章