vue子组建给父组件抛值

 

一。子组建给父组件抛个值

1.首先先自定义好子组建，然后在父组件components：{zujian}先引入！！！

2.在父组件中使用子组建标签对儿，并给子组建绑定一个事件

如   <zujian @aa="tty"></zujian>  这里aa是自定义的方法名，tty是事件

methods:{

  tty(a){

    console.log(a)

//这里的a是随便定义的接收参数tty中不需要传参数也OK的

  }

}

3.首先在子组件中绑定个事件，顺便在data里面写好要传递的参数。

<button @click="btn">这是子组建页面准备向父组件抛个字符串</button>

methods:{

       btn(){

             this.$emit('aa', this.msg)

             console.log(1)

       这里的aa一定要和父组件绑定的方法名一致！！！ 而第二个this.msg是在子组建data里面定义好的要发送的参数 

      }

}

4.此时已经OK了就差在父组件中进行渲染了，先在父组件中的data里面定义一个空的值进行保存传递过来的参数如：ccc：‘’，然后在父组件中tty中进行赋值

   tty（a）{

      this.ccc=a

   }

再在父组件中使用一个标签<div>{{ccc}}</div>j进行渲染就OK了