zoukankan      html  css  js  c++  java
  • vue父子组件之间的传值

    引入组件

    父组件

    <div>
        <form-edit></form-edit>
    </div>
    
    import FormEdit from "路径"   //引入
    export default {
        name: "HelloWorld",
        components:{
            FormEdit
        },
        data(){
          return{
         
          }
        }
    }
    

    子组件

    <template>
        <div>{{ change}}</div>
    </template>
    
    export default {
      name: "child",
      data(){
        return{
            change:123
        }
     }
    }
    

    父组件 --> 子组件

    父组件

    <div>
        <child v-bind:change="str"></child>
    </div>
    
    export default {
        name: "HelloWorld",
        data(){
            return{
                str: '123'          //str可以是对象,数组等
            }
        }
    }
    

    子组件

    <template>
        <div>{{ change}}</div>
    </template>
    
    export default {
        name: "child",
        props:["change"],
        data(){
            return{
                console.log(this.change)
            }
        }
    }
    

    子组件 --> 父组件

    父组件

    <div>
        <child v-on:add="ok"></child>
    </div>
    
    export default {
        name: "HelloWorld",
        data(){
            return{
    
            }
        },
        methods:{
            ok:function(param){}        //param子组件传过来的值
        }
    }
    

    子组件

    <template>
        <div @click="dian">我是子组件</div>
    </template>
    
    export default {
        name: "child",
        data(){
            return{
                str:'123'
            }
        },
        methods:{
            dian(){
                this.$emit("add",str)//第一个值为父组件绑定的属性,第二个值为要传的值 
            }
        }
    }
    
  • 相关阅读:
    ActiveMQ持久化机制
    ActiveMQ的使用
    ActiveMQ解释
    Linux CentOS安装Tomcat
    nginx使用Keepalived
    Session共享解决方案
    Spring框架AOP使用扩展
    Myabtis测试(二)错题整理分析
    初识Spring及打印机案例
    MyBatis注解
  • 原文地址:https://www.cnblogs.com/loveyt/p/9687802.html
Copyright © 2011-2022 走看看