Bloxed_shangyc的博客

If you are don't enough strong to continue studing please

vue 父组件与子组件相互通信

父组件传值到子组件

注册一个子组件,需要向子组件传值,给渲染的子组件自定义标签属性,绑定传输数据

<privateScoreTop  :msg ="Widget" v-on:listenTochildEvent="showMessageFromChild"></privateScoreTop>

msg是绑定的自定义属性,类似我们原生html 给标签自定义属性一样,Widget是传输变量,
子组件接收:

export default{
  data(){
  },
  mothods:{
  },
 mounted (){

  },
 props:["msg"]

}

通过props接收到msg属性值,在子组件里通过msg渲染数据,

<span>{{msg}}</span>

子组件传值到父组件

在子组件里

export default{
    methods: {
          onfilter(){
             this.$emit("listenTochildEvent","browse");
          },
          }
}

在父组件:

<privateScoreTop  :msg ="Widget" v-on:listenTochildEvent="showMessageFromChild"></privateScoreTop>

 showMessageFromChild(data){
        alert(data);
     }

通过this.$emit(),子组件像父组件传值得过程。

阅读更多
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/github_37847992/article/details/78167337
文章标签: vue通信
个人分类: VUE
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭