vue与组件的通讯（props与$emit）

╰+哭是因爲堅強的太久メ 2023-01-23 13:56 177阅读 0赞

1、父页面给组件传递数据(**props**)  
父页面

<template>
    	<view>
    		<a-chlid :titleData="titleData"></a-chlid>
    	</view>
    </template>
    <script> //组件的引入这边就不多描述了 export default{ data(){ return{ titleData:'标题' } } } </script>

组件

<template>
    	<view>
    		{
       {titleData}}
    	</view>
    </template>
    <script> //组件的引入这边就不多描述了 export default{ name:'a-chlid', props:{ titleData:{ type:String,//传入参数的类型 default: null //默认值 } } } </script>

2、组件传递数据给父页面(**$emit**)  
组件

<template>
    	<view @click="btn">
    		点我
    	</view>
    </template>
    <script> //组件的引入这边就不多描述了 export default{ name:'a-chlid', methods:{ btn(){ //不一定是点击事件，也有可能是执行了一个请求，然后把请求到的数据发送 let data={ name:'lin' } this.$emit('userName', data);//this.$emit必须，userName可自定义 } } } </script>

父页面

<template>
    	<view>
    		<a-chlid @userName="userName"></a-chlid>
    	</view>
    </template>
    <script> //组件的引入这边就不多描述了 export default{ methods:{ //组件发送时，会触发页面的@userName事件，并且e接收数据 userName(e){ console.log(e)//name:'lin' console.log(e.name)//lin } } } </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，177人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue与组件的通讯（props与$emit）

1、父页面给组件传递数据(props) 父页面 <template> <view> <a-chlid :titleData="titleDa

╰+哭是因爲堅強的太久メ/ 2023年01月23日 13:56/ 0 赞/ 178 阅读

相关 vue的$emit与$on、$off

vue中，父组件（或者是页面）传数据给子组件用props，这个比较简单 a.vue <child :data-props="dataProps"></child>

Love The Way You Lie/ 2022年12月29日 02:14/ 0 赞/ 159 阅读

相关 Vue父子组件间传值之 props/$emit

示例一：父组件向子组件传值及方法定义父组件： <template> <div> <h2> { {msg}}</

阳光穿透心脏的1/2处/ 2022年12月20日 13:59/ 0 赞/ 190 阅读

相关 vue中 $emit，props的用法

vue中关于$emit，props的用法 1. 父组件使用 props 把数据传给子组件 2. 子组件使用 $emit 触发父组件的自定义事件子组件：chil

忘是亡心i/ 2022年12月10日 10:10/ 0 赞/ 181 阅读

相关 uni-app中的页面通讯$on与$emit

在页面与页面之间通讯时，很多人会直接选择使用在navigato的时候直接拼接字符串来传递。可是当需要传依个比较多数据的的对象的时候这个方式就不是很管用了，为此uniapp给我们

悠悠/ 2022年11月13日 14:27/ 0 赞/ 231 阅读

相关 Vue-组件通信-props和$emit

props 用于父传子用法父组件：在子组件标签中自定义一个属性（:content=""）进行传值（content） <D :content="con

待我称王封你为后i/ 2022年10月30日 05:23/ 0 赞/ 208 阅读

相关 Vue_组件参数校验与非Props特性

一.props 子组件接收父组件的参数的时候，props注册接收的参数 props:['count'] 子组件可以对接收的参数校验。例如规定接收的coun

梦里梦外;/ 2022年05月22日 13:30/ 0 赞/ 252 阅读

相关 props和$emit

props 父组件向子组件传值，子组件调用 $emit 子组件调用父组件中定义的方法 > 父组件 <template>

╰+哭是因爲堅強的太久メ/ 2021年10月01日 09:18/ 0 赞/ 324 阅读

相关 vue之父子组件间通信实例讲解(props、 ref、 emit)

> 组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。那么组件间如何通信，也就成为了vue中重点知识了。这篇文章

男娘i/ 2021年07月26日 22:23/ 0 赞/ 458 阅读

相关 uniapp中的组件通讯（$emit和$on）

效果图： ![20210307003902909.gif][] 实现代码： ![20210307003920802.png][] bus.js imp

川长思鸟来/ 2021年07月25日 15:29/ 0 赞/ 1434 阅读