vue 获取父组件的data
2017-12-16 22:04:13 github_37077700 阅读数 2205

注:以下代码未使用esLint语法检查
父组件:

<template>
      <div class="wrapper">
            <cp_action @parentMethod="macSelect"></cp_action>
      </div>
</template>
<script>
import ../components/action  //引入子组件
export default{
    components:{
        cp_action
    },
    method:{
        macSelect(){
            //方法体
            alert(123);
        }
    }
}
</script>

子组件:

<template>
    <div class="bet-action">
        <span class="mac-select" @click="childMethod">机选</span>
    </div>
</template>
<script>
    export default{
      methods: {
          childMethod() {
              console.log('请求父组件方法');
              this.$emit('parentMethod');  //使用$emit()引入父组件中的方法
          }
      },
    }
</script>
2017-12-16 22:04:00 github_37077700 阅读数 71

vue子组件获取父组件方法

注:以下代码未使用esLint语法检查
父组件:

<template>
      <div class="wrapper">
            <cp_action @parentMethod="macSelect"></cp_action>
      </div>
</template>
<script>
import ../components/action  //引入子组件
export default{
    components:{
        cp_action
    },
    method:{
        macSelect(){
            //方法体
            alert(123);
        }
    }
}
</script>

子组件:

<template>
    <div class="bet-action">
        <span class="mac-select" @click="childMethod">机选</span>
    </div>
</template>
<script>
    export default{
      methods: {
          childMethod() {
              console.log('请求父组件方法');
              this.$emit('parentMethod');  //使用$emit()引入父组件中的方法
          }
      },
    }
</script>
posted @ 2017-12-16 22:04 我在等风也等你啊 阅读(...) 评论(...) 编辑 收藏
2018-10-06 09:18:00 weixin_33769125 阅读数 218
  • 1、在父组件中定义需要传入的值,如 trust-plan-id-list
 <el-dialog title="请选择需要导出的字段" style="" width="80%" :visible.sync="downLoadFileSelectd"  v-if="downLoadFileSelectd">
        <downLoadFileSelect :trust-plan-id-list="selectTrustPlanIdList" @close="close">
        </downLoadFileSelect>
      </el-dialog>
  • 2、在子组件中声明并使用变量
    在props 中声明,然后就可以直接使用啦
 props:[
      "trustPlanIdList"
    ],
2019-03-14 17:36:29 BoReFrontEnd 阅读数 138

refs访问组件实例

  • 父组件是行为主体,父组件主动获取子组件数据
  • 子组件通过方法公开只读数据

代码实例

// ParentComponent.vue
<template>
  <div>
    <ChildComponent ref="child"></ChildComponent>
    <button @click="submit">提交</button>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent'

  export default {
    name: "ParentComponent",
    components: {ChildComponent},
    methods: {
      submit () {
        // 通过方法获取数据
        let childData = this.$refs.child.getData()
        console.log(childData)
        // 通过属性获取数据
        let arrData = this.$refs.child.arr
        console.log(arrData)
      }
    }
  }
</script>

// ChildComponent.vue
<script>
  export default {
    name: "ChildComponent",
    data(){
    	return{
    		arr: ['1', 'a']
    	}
    }
    methods: {
      getData () {
       // return "Data from Child"
        return this.arr
      }
    }
  }
</script>
2019-04-29 18:54:55 weixin_41996632 阅读数 280

方法一、从父组件调用子组件方法获取数据

1、子组件addindex.vue写一个方法,返回要用的数据

methods: {
    // 父组件获取数据
    getVal () {
      return this.procedure
    }
}

2、在父组aindex.vue件中获取值

<ProcedureEdit ref="procedureEdit"></ProcedureEdit>
import ProcedureEdit from 'pages/procedure/add/addindex'
methods: {
    handleEdit () {
        let oldProcedure = this.$refs['procedureEdit'].getVal();
        console.log(oldProcedure)
    }
}

方法二、子组件调用父组件方法通过传值,将子组件的值传到父组件

1、子组件addindex.vue,其中true就是传的值,也可以传变量

methods: {
    // 父组件获取数据
    Val () {
      m.$emit('return-value', true);
    }
}

2、父组件aindex.vue

<ProcedureEdit @return-value="getVal"></ProcedureEdit>
import ProcedureEdit from 'pages/procedure/add/addindex'
methods: {
    getVal (result) {
        console.log(result)
    }
}

 

vue中父组件改变子组件中的data,子组件改变父组件中的data

阅读数 458

一、父组件改变子组件的data父组件parent.vue&lt;template&gt;   &lt;div&gt;     &lt;spanstyle="height:100px;"&gt;父组件&lt;/span&gt;     &lt;button@click="change"&gt;按钮&lt;/button&gt;    

博文 来自: zi114323

vue子组件改变父组件中data的值

阅读数 264

1.子组件无法直接使用父组件中data的值2.prop是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。那么改如何在子组件中修改父组件的data中变量呢?既然子组件无法获取父组件的变量,那就让父组件自己修改自己的数据--&gt;子组件调用自己的方法,该方法中调用this.$emit方法用来通知父组件“你该去修改你的变量啦”可以通过在子组件中调用this...

博文 来自: mldwyy

Vue子组件如何调用父组件的data和方法

阅读数 80

&lt;!DOCTYPEhtml&gt;&lt;htmllang="en"&gt;&lt;head&gt;&lt;metacharset="UTF-8"&gt;&lt;title&gt;Title&lt;/title&gt;&lt;scriptsrc="https://cd

博文 来自: weixin_34216107

Vue子组件向父组件传data数据

阅读数 11

在Vue中,子组件是怎么向父组件传自己的data数据?原理:父组件可以通过给子组件绑定虚拟事件来向子组件传递自己的方法,因此这个虚拟事件就装载了父组件的方法,子组件拿到虚拟事件之后进行注册,就可以使用来自父组件的方法了,因此,只需要向虚拟事件传递参数,那么就相当于向父组件的方法传递参数,而父组件也因此拿到了来自子组件的数据。说那么多,直接上代码:(按照数据传递的流动方向)//1....

博文 来自: qq_41672008

vue中父组件改变子组件中的data

阅读数 1774

父组件:father.vue<template>...<button@click="changeChild">Change</button><childrenref="child"></children>...</template><script>impor...

博文 来自: romeo12334
没有更多推荐了,返回首页