vue父子组件之间的传值

Posted loveyt

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)//第一个值为父组件绑定的属性,第二个值为要传的值 
        }
    }
}

以上是关于vue父子组件之间的传值的主要内容,如果未能解决你的问题,请参考以下文章

Vue父子组件之间的传值

Vue父子组件之间的传值

Vue父子组件之间的传值

Vue之父子组件之间的传值

vue父子组件之间的传值

Vue--父子组件之间的传值