美文网首页
子级给父级传值

子级给父级传值

作者: 布呐呐aa | 来源:发表于2020-11-23 10:00 被阅读0次

首先需要在子级中注册$emit事件
子级

模板1:html
<template>
    <div id="users">
        <p @click="chuanzhi">子级给父级传值</p>
    </div>
</template>

行为:js
<script>
  export default(){
      methods:{
          chuanzhi(){
            this.$emit("fangfa","子级传递的数据")
          }
      }
  }
</script>

父级

模板:html
<template>
    <!-- app为根标签,只能唯一,内容只能添加到div里 !-->
    <p>App里的标签{{title}}</p>
    <!-- 找到子级的节点,然后定义一个属性接收传递进来的方法名字就是子级的事件名字  !-->
    <!-- updatafangfa是随便起的本地名字,括号内的$event是固定写法代表传递进来的内容!-->
    <users :fangfa="updatafangfa($event)"  :user="userData"></users>
</template>
<!--行为:js !-->
<script>
  //引用组件
  import users form './components/Users'
  export default{
      data(){
          return{
            title:"App中的title数据"
          }
      },
    methods:{
        //创建方法,然后将传递进来的内容拿到
        updatafangfa(data){
          this.title = data
        }
    }
  }
</script>

相关文章

  • 父子组件通信

    父级给子组件传值: 在父级中调用组件 在子组件js中获取 子组件给父级传值 在子组件中 父级 html 父级js

  • 子级给父级传值

    首先需要在子级中注册$emit事件子级 父级

  • Vue 组件传值

    一、组件间通信传值的各种方式与场景 1、父组件向子组件(跨级)传值 1.1 父组件通过props给子组件传值 1....

  • Vue_组件间传值

    1、父组件传值给子组件2、子组件传值给父组件 1、父组件传值给子组件 2、子组件传值给父组件

  • Vue传值

    1,路由传参 2,组件传参 props父级传给子级 ,$emit子级传给父级

  • React中的组件间传值汇总

    父传子:属性传值 原理:父级调用子级的时候,在子组件身上绑定一个属性,值为需要传递的数据。子组件中通过 this....

  • vue中封装组件

    vue组件 组件传值、父级发起的请求、子辈发起的请求; 首先说一下今天遇到一个情况,父亲给子级状态,子级通过pro...

  • vue2.0 父子组件传值

    父组件传值给子组件 子组件 子组件通过 props 接收值 父组件 父组件通过标签属性传值 子组件传值给父组件 子...

  • 所有情况下的常用组件通信

    一.父子通信 props 父级向子级传递值 ref 父级通过事件修改子组件属性 二.子父通信 $emit 子级通过...

  • Vue父子组件通讯传值

    Vue父子组件通讯传值 父组件往子组件传值 子组件与父组件通信 方式1 采用中间件作为通讯中转站实现子组件往父级组...

网友评论

      本文标题:子级给父级传值

      本文链接:https://www.haomeiwen.com/subject/tedmiktx.html