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

柔光的暖阳◎ 2021-12-05 15:56 319阅读 0赞

vue 父组件与子组件相互通信一、父组件给子组件传值  
      props 实现父组件向子组件传值。

1父组件里：
    <child-pack  :msg ="myMsg" v-on:listenTochildEvent="showMessageFromChild"></child-pack>
    msg是绑定的自定义属性，类似我们原生html 给标签自定义属性一样，Widget是传输变量
    <script >
    import childpack from './childPack.vue' //引用子组件
    export default{
      name: 'FatherPack',
      components: { childpack },
      data(){
          return（）{
               myMsg：‘我是父组件参数’
           }
      },
      mothods:{
      }
    
    }
    </script>
     
    2子组件里：
    <div>
        <span>{
       {msg}}</span>
    </div>
    export default {
      name: 'ChildPack',
      props:["msg"]
     //也可以指定默认类型和默认值
     // props: {
     //    msg: {
     //       type: Number,
      //      default: 0
      //    }
     // },
      data(){
      },
      created() {
         console.log（'child_msg',this.msg）
      },
      mothods:{
      },
    
    }
    
    二、子组件传值到父组件
    this.$emit() 实现子组件向父组件传值。
    
    1在子组件里:
    export default{
        methods: {
              changeFather(){
                 this.$emit("listenTochildEvent","我是子组件的参数");
              },
            //可以传递参数，参数可以是值、对象、数组等类型。
            //  changeFather(pms){ 
            //    this.$emit("listenTochildEvent",pms);
           //   },
    } } 
    
    
    2在父组件：定义事件listenTochildEvent，并实现showMessageFromChild方法，接收父组件传递来的参数。
    <child-pack  :msg ="myMsg" v-on:listenTochildEvent="showMessageFromChild"></child-pack>
    <script >
    import childpack from './childPack.vue' //引用子组件
    export default{
      name: 'FatherPack',
      components: { childpack },
      data(){
          return（）{
               myMsg：‘我是父组件参数’
           }
      },
      mothods:{
         showMessageFromChild(data){
            console.log(data);
      }
    
    }
    </script>

三、将一、二 一起使用就是可以实现父子组件互相传值。

原文：[https://www.cnblogs.com/hao-1234-1234/p/10157063.html][https_www.cnblogs.com_hao-1234-1234_p_10157063.html]

[https_www.cnblogs.com_hao-1234-1234_p_10157063.html]: https://www.cnblogs.com/hao-1234-1234/p/10157063.html