zoukankan      html  css  js  c++  java
  • vue入门三之组件传参

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

      

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

      

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

    二、props的书写方式

      

        上面就是直接传参的形式

       

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

      

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

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

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

      

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

      

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

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

    四、兄弟组件的传参

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

      还是来看看下面的问题吧

      

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

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

      

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

      

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

      

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

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

      

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

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

      可以在main.js中输入

    ·· 

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

      

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

      

  • 相关阅读:
    String类的substring方法
    postman绕过登录,进行接口测试的方法
    Dubbo
    那些吊炸天的互联网名词
    版本控制工具git
    Ubunto20.04 sudo apt-get update 出现目标被重置多次!
    ubuntu环境下搭建Hadoop集群中必须需要注意的问题
    Python作业---内置数据类型
    python作业完成简单的文件操作
    python3实现计算器
  • 原文地址:https://www.cnblogs.com/dy105525/p/12398514.html
Copyright © 2011-2022 走看看