• vue传值


    在vue 中组件间的传参是必不可少的,下面说下几种传参方式

    1.父组件传值给子组件,首先父组件发送的形式是用bind(用缩写:)绑定值到子组件身上。然后子组件用属性props接收

    2.子组件传值父组件,首先是子组件发送的形式是this.$emit(事件名,需要发送的值),事件名:父组件on监听的方法,父组件第一件事就是监听子组件发送过来的事件名,@事件名=获取值的方法。获取值的方法(值)*,就这样拿到了儿子发过来的值

    3.兄弟传值,两个都要引入公共js->bus。首先是发送者,this.$emit(名字,值)。然后是接受者,this.$on("传过来的那个名字",函数(值)),这里要注意的是接受者的这个监听事件应该是放在钩子mounted事件内。同时注意this指向问题。(可用封装方法)

    上面几种是常用的方式  还可以使用provide 和 inject  这个是在父组件 provide 注入数据 ,在每个子组件中都可以通过 inject 去接受参数

    在父组件中

    export default {
        data() {
            return {
                msg: 'hello vue+webpack',
                fromName : {
                  msg : 'i love you'
                },
                loginForm: {
                  username: "cg",
                  password: "23455",
                  code: "2334",
                  redomStr: ""
                },
            }
        },
        provide () {
          return {
            fromHome: this.fromName
          }
        },
    

     在子组件中 

    <template>
      <div>我是注入的看看
          <div>{{fromHome.msg}}</div>
      </div>
      
    </template>
    
    <script>
    export default {
        inject: ['fromHome']
    }
    </script>
    

      这里要注意的是 在父组件中注入的参数需要是data 种注册的对象,否则在父组件中值变化后在子组件中不会更新。

  • 相关阅读:
    centos6下安装配置DNS(bind)
    centos6下安装配置NFS
    如何在kettle里面加载hadoop
    jQuery练习JavaScript事件与事件对象
    摆上殷勤的工作&职场用祷文
    Ajax自动完成(autocomplete)响应文本框输入后显示模糊数据列表
    未来的书香
    重要的计算机学习资料(累计中)
    W4F学习笔记之一
    软件测试重要资料汇集
  • 原文地址:https://www.cnblogs.com/buxiugangzi/p/11383823.html
Copyright © 2020-2023  润新知