子级给父级传值

2020-11-23  本文已影响0人  布呐呐aa

首先需要在子级中注册$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>
上一篇下一篇

猜你喜欢

热点阅读