zoukankan      html  css  js  c++  java
  • Vue组件之间的传值

    要求:将输入框的内容显示在列表框,并点击列表删除

    一、父向子传值:props:[]

    二、子向父传值:this.$emit()

    //父组件
    <div id='root'>
           <input v-model="inputValue"/>
          <button @click='handleSubmit'>提交</button>//点击按钮将输入框内容作为li显示
      <ul>
        <todo-item 
          v-for='(item,index) of list'
          :content='item'//将item作为属性传递给子组件todo-item 
          :index='index'//将index作为属性传递给子组件todo-item 
          @delete='handleDelete'//监听子组件传递过来的delete事件名
        >
        </todo-item>
      </ul>
    </div>
    <script>
    //子组件
    Vue.component('todo-item',{ 
      props:['content','index'],//接收传递过来的属性
      template:'<li @click="handleClick">{{content}}</li>',
      methods:{
        handleClick:function(){
          this.$emit('delete',this.index)//将delete事件名及index属性传递给父组件
      }
      }
    })
    
    new Vue({
      el:'#root',
      data:{
      inputValue:'',
      list:[]
      },
      methods:{
        handleSubmit:function(){
          this.list.push(this.inputValue)
          this.inputValue=''//清空输入框
        },
        handleDelete:function(index){
        this.list.splice(index,1);
        }
      }
    })
    </script>

    三、兄弟间传值

    (1)Vuex状态管理工具

     状态管理可以理解为数据管理。集中存储:Vue只关心视图,所以我们需要一个仓库(store)来存储数据。

    应用场景:处理多个组件依赖同一个数据。

         一个组件的行为改变数据,同时会影响另一个组件的视图。

    vuex介绍:

    (1)为vue.js开发的状态管理模式

    (2)组件状态集中管理

    (3)组件状态改变遵循统一的规则

    由于vuex的状态存储是响应式的,所以从store实例中读取状态的最简单方法就是在计算属性中返回某个状态。

    Vuex 并不限制你的代码结构。但是,它规定了一些需要遵守的规则:

    • 应用层级的状态应该集中到单个 store 对象中。

    • 提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。

    • 异步逻辑都应该封装到 action 里面。

    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。所以 mutations 上存放的一般就是我们要改变 state 的一些方法。

    mutations与actions的区别:mutations直接变更状态,而actions提交的mutations

    例子:

     

    创建store对象

    在组件1中使用:

    在组件2中使用:

    (2)使用EventBus解决

     在vue中可以使用EventBus来作为沟通桥梁,就像是所有组件共用相同的事件中心。可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件。

     如何使用EventBus:

    • 初始化,创建一个空Vue对象并导出

    •  $emit发送事件

    •  $on接收事件

     

  • 相关阅读:
    java:maven(maven-ssm(聚合,分包开发))
    java:Maven(Maven_ssm)
    java:Mybatis框架3(二级缓存,延时和积极加载,SSI(Ibatis)集成,SSM集成)
    java:LeakFilling (Mybatis)
    java:Mybatis框架2(基于mapper接口的开发,多种查询,复合类型查询,resultMap定义,多表联查,sql片段)
    java:Mybatis框架1(基本配置,log4j,Junit4(单元测试))
    java:Springmvc框架3(Validator)
    java:Springmvc框架2(Ajax,Json,Interceptor,Upload,Exception)
    WebLogic XMLDecoder反序列化漏洞复现
    Struts2-052 漏洞复现
  • 原文地址:https://www.cnblogs.com/xiaoan0705/p/9394858.html
Copyright © 2011-2022 走看看