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)//第一个值为父组件绑定的属性,第二个值为要传的值
        }
    }
}

原文地址:https://www.cnblogs.com/loveyt/p/9687802.html

时间: 2024-09-30 19:53:57

vue父子组件之间的传值的相关文章

【转】vue父子组件之间的通信

vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件.无论哪种组织方式父子组件的通信方式都是大同小异. 父组件到子组件通讯 父组件到子组件的通讯主要为:子组件接受使用父组件的数据,这里的数据包括属性和方法(String,Number,Boolean,Object, Array ,Function).v

vue中组件之间的传值

按照对象分类: 一.父子组件之间的传值 1.使用props和$emit 2.在引入的子组件中使用ref,通过this.$refs.xxx.方法/值来获取子组件中的方法或者值 3.子组件中使用this.$parent来获取父组件中的值或者方法 4.父组件中使用this.$children来获取子组件中的值或者方法 二.兄弟组件中的传值 1.使用eventBus作为中间件,然后使用$emit去抛出事件,使用$on去监听事件 这里要注意一些事项:a.bus.$emit在beforeDestroy中去触

vue父子组件之间传值

vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种vue-cli搭建的同理 父组件通过 v-bind:属性名(自定义的) = "要传递的数据" 子组件通过 props:["属性名"]  这个属性名就是父组件传递过来的数据信息 <div id="app"> <mod :abc=&qu

vue 学习五 深入了解components(父子组件之间的传值)

上一章记录了 如何在父组件中向子组件传值,但在实际应用中,往往子组件也要向父组件中传递数据,那么此时我们应该怎么办呢 1.在父组件内使用v-on监听子组件事件,并在子组件中使用$emit传递数据 //父组件 <template> <div id="home"> <com test='12345' test2='1213232111111' @a_even="a_even"></com> //使用v-on监听子组件事件

Vue之父子组件之间的传值

父组件,首先要挂载子组件 如果父组件传值给子组件,则 <transition mode="out-in"> <router-view  :applyList='applyList'  applyPath='flightBstrip'></router-view> </transition> 1.父组件挂载子组件的时候声明属性 applyList,applyPath.(applyList是变量,flightBstrip是字符串) 2.子组件

Vue组件之间的传值方法

在vue当中有两种组件之间的传值方法,分别是 * 父子组件* 之间的传值和* 非父子组件 *之间的传值方法 父子组件之间的传值方法 父子组件之间的传值分为两种 * 父组件给子组件传值 子组件给父组件之间的传值 父组件给子组件传值方法 // 父 <div id = "app"> <my-content></my-content> </div> // 子 <template id="content"> <

vue 组件之间的传值

组件之间的传值有三种  1,父组件给子组件传值 ,   2,子组件给父组件传值   3, 非父子组件之间的传值(又叫兄弟组件传值) 1.父组件给子组件传值   (父组件给子组件传值需要通过props) 首先我的页面结构是这样的  child是子组件   father是父组件, 在这里我新建一个父组件  father.vue <template> <div> <div>这是父组件</div> <!-- 使用组件child --> <child

Vue组件~父子组件之间的通信(传值)

1.父组件向子组件传参 父组件中通过v-bind对要传参数的绑定:(例如) :dataSourceName:是在子组件中要用到的值 "ctpSaveEchartSetting.dataSourceId":是在父组件中要传的值 子组件中的接收通过props(数据值单项绑定的)进行接收:(例如) 注:在props中有的变量就不能再data中再定义,或通过监测.计算属性直接去改变,因为js中的对象和数组是引用对象,指向同一个内存空间,如果在子组件中改变props中的值会影响到父组件中的值的状

vue之父子组件之间的通信方式

(一)props与$emit <!-这部分是一个关于父子组件之间参数传递的例子--> <!--父组件传递参数到子组件是props,子组件传递参数到父组件是用事件触发$emit--> <!OCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <sccipt src="js/vue.js" t