首页 > 其他 > 详细

vue入门三之组件传参

时间:2020-03-02 23:45:49      阅读:93      评论:0      收藏:0      [点我收藏+]

 一、父组件像子组件传递参数

  技术分享图片

 

 

 好了,上面的图片显而易见,:movies就是动态绑定的属性,它是向组件xsMovies中传递参数,值是item,那么我们怎么在xsMovies这个组件中去接收呢?

  技术分享图片

 

 

 就这样就可以用props属性来接收参数了,不需要再在data里面来定义,不然就会报错的,现在只需要把movies对象里面值在页面渲染即可。

二、props的书写方式

  技术分享图片

 

    上面就是直接传参的形式

 

   技术分享图片

 

     这个就是检验传入参数的类型

  技术分享图片

 

 

   我们一般只是使用到上面所圈出的类型,一下的不是必须的参数,实在用不到的话是可以进行省略的。

三、子组件像父组件专递参数

  首先的是组件的引入,这个我不在赘余。

  技术分享图片

 

 

   向父组件中注册一个input事件,传递参数e

  技术分享图片

 

 

   这个我们就只需要在    methods:{} 里面触发 etFist(value){} 方法即可,其中 value 就是我们传递过来的 e

  注:这里特别强调下,我们的子组件是不能够更改父组件所传递过来的参数的,那么我们只能够将值返回给福父组件即可,在父组件里面来进行操作

四、兄弟组件的传参

  这个我得强调下不是很常用,我们也可以使用VUEX来解决这个问题

  还是来看看下面的问题吧

  技术分享图片

 

 

   上面的page和loading是同级的组件,那么我们怎么来操作呢?

  好了我们接下来创建一个空的js文件,里面来进行书写

  技术分享图片

  接下来我们在两个组件中都引入它

  技术分享图片

 

 

   再点击事件中我们来进行操作

  技术分享图片

 

   这是其中的一个组件的书写方式,他将e给抛出来

  另一个接收的组件书写如下

  技术分享图片

 

   好了,这就是我们兄弟组件的传递方式,当然还有其它的方法,我这里就不在过多的介绍了。

  还是简单的说下第二种方式吧

  可以在main.js中输入

·· 技术分享图片

 

   接下来的传参,我们已经创建了一个全局的了,因此就不需要其它的了

  技术分享图片

 

   接收参数的兄弟组件是一样的道理了哈,就不在书写。

 

  

vue入门三之组件传参

原文:https://www.cnblogs.com/dy105525/p/12398514.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!