zoukankan      html  css  js  c++  java
  • Vue父子组件相互传递参数

    <Parent></Parent>   //父组件
    <Child></Child>    //子组件

    父组件向子组件传递:

      静态传递(父组件动态改变,子组件不变):

    <Parent :id='id'></Parent>   //在父组件绑定定义参数
    然后在子组件中添加:
    export default {
      props: ['id'], 
    } 

      动态传递(父组件动态改变,子组件跟着变):

    <Parent ref="child"></Parent>    //在父组件定义ref,相当于为refs添加一个子组件名字
    
    在子组件中定义方法,接收参数:
    childMethod(item){
          this.item= item
    },
    
    然后在父组件JS中使用:
    this.$refs.child.childMethod(item)    //将item参数传给子组件
    

      

    子组件向父组件传递:

    <Parent @parentMethod="parentMethod"></Parent>     //在父组件中定义个方法
    
    在JS中添加方法:
    parentMethod(item) {
        this.item = item
    }
    
    
    然后在子组件JS中:
    this.$emit('parentMethod','item')    //这样就将'item'字符串,传给父组件this.item了
    

      

  • 相关阅读:
    数组迭代方法
    promise
    Gulp执行预处理
    第一个gulp 项目
    vue 单元素过渡
    webpack 入门
    webpack初始化
    v-for 指令
    ajax 工作原理
    面试小问题
  • 原文地址:https://www.cnblogs.com/NoteBook3013/p/12105792.html
Copyright © 2011-2022 走看看