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

╰+哭是因爲堅強的太久メ 2023-01-23 13:56 173阅读 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 条评论，173人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 vue中 $emit，props的用法

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

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

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

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

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

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

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

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

相关 props和$emit

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

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

相关 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 赞/ 1431 阅读

相关 vue中$emit与$on

`var Event = new Vue();` 相当于又`new`了一个`vue`实例，`Event`中含有`vue`的全部方法； `Event.$emit('msg',t

港控/mmm°/ 2021年06月26日 16:06/ 0 赞/ 471 阅读