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

子级给父级传值

作者: 布呐呐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>
    

    相关文章

      网友评论

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

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