Vue开发_组件之间的传参（1）

【一】父组件向子组件传递数据（方式: props）

父组件 Parent.vue
<template>
    <div class="parent">
        <h2>{{this.msg}}</h2>
        <son psMsg="父组件传递给子组件内容"></son> 
        </div>
</template>
<script>
import son from './components/son.vue' //引入子组件
export default {
  name: "parent",
  data () {
    return {
      msg: '父组件内容'
    };
  },
  components: {son},
};
</script>
子组件 son.vue
<template>
    <div class="son">
      <p>{{ sonMsg }}</p>
      <p>子组件接收到内容：{{ psMsg }}</p>
    </div>
  </template>
  <script>
  export default {
    name: "son",
    data(){
      return {
        sonMsg:'子组件内容',
      }
    },
    props:['psMsg'],  //接手父组件设定
  }
</script> 

 【一】父组件向子组件传递数据（方式: ref）

父组件 Parent.vue 
<template>
  <div>
    <child-component ref="childComp"></child-component>
    <button @click="getChildMessage">Get Child Message</button>
  </div>
</template>
<script>
import ChildComponent from './Child.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    getChildMessage() {
      console.log(this.$refs.childComp.getMessage());
    }
  }
}
</script>
子组件 Child.vue
<template>
  <div>{{ childMessage }}</div>
</template>
<script>
export default {
  data() {
    return {
      childMessage: 'Hello from Child'
    }
  },
  methods: {
    getMessage() {
      return this.childMessage;
    }
  }
}
</script>

【二】子组件调用父组件方法(事件传惨)

父组件 Parent.vue
<template>
    <div class="parent">
        <h2>{{this.msg}}</h2>
        <son psMsg="父组件传递给子组件内容" @transfer="getUser"></son> 
        <br>
        <p>父组件接手到的内容：{{ username }}</p>
        </div>
</template>
<script>
import son from './components/son.vue' //引入子组件
export default {
  name: "parent",
  data () {
    return {
      msg: '父组件内容',
      username:'',
    };
  },
  components: {son},
  methods:{
    getUser(msg) {
      this.username = msg
    }
  },
  mounted() {
  }
};
</script>
子组件 son.vue
<template>
  <div class="son">
      <p>{{ sonMsg }}</p>
      <p>子组件接收到内容：{{ psMsg }}</p>
      <button @click="setUser()"> 向父组件传值</button>
  </div>
  </template>
  <script>
  export default {
    name: "son",
    data(){
      return {
        sonMsg:'子组件内容',
        user:'子传父的内容'
      }
    },
    props:['psMsg'],  //接手父组件设定
    methods:{
      setUser(){
        this.$emit('transfer', this.user) // 将值绑定到transfer上传递过去
      }
    }
  }
</script>

 【三】非父子组件之间的传参(SPA 事件监听1)

新建监听控制文件 event.js

import Vue from 'vue'    
export default new Vue;

消息驱动注册 a.vue、b.vue

import rec_send_Event from '../js/event.js'
mounted() {
    rec_send_Event.$on('listeningkey', function(param){
       self.autoaddtype = param
    });
});

• • listening key字母要小写(部分android不支持)
  • rec_send_Event.$off('listeningkey') 解除监听

消息事件的触发, start.vue

 import rec_send_Event from '../js/event.js'
 send_Event.$emit('listeningkey', value);

• •  这种监听模式是调用该页面内所有监听都会触发通过listeningkey区分
  • 这种监听模式是打破了一入口 一出口的模式 所有作为特殊处理模块集中管理  

  父组件

<template>
    <div class="wrap">
        <div>我是Father组件</div>
        <Son ref="son"></Son>
    </div>
</template>
<script>
    import Son from './Son'
    export default {
        name: "Father",
        mounted(){
            this.$refs['son'].$on('func',(msg)=>{
                console.log(msg);
            })
        },
        components:{
            Son
        }
    }
</script>

子组件

<template>
    <div>
        <div>我是Son组件</div>
        <button @click="$emit('func','我是子组件传递的消息1！')">Send1</button>
        <button @click="sendMsg">Send2</button>
    </div>
</template>
<script>
    export default {
        name: "Son",
        methods:{
            sendMsg(){
                this.$emit('func','我是子组件传递的消息！');
            }
        }
    }
</script>

【四】父组件 <=> 子组件传参(prlvide/Inject)

可以在祖先组件和后代组件之间共享数据，但这种方法通常用于全局性的数据共享

父组件 Parent.vue
<template>
  <div>
    <child-component></child-component>
  </div>
</template>
<script>
export default {
  provide() {
    return {
      parentMessage: this.message
    }
  },
  data() {
    return {
      message: 'Hello from Parent'
    }
  }
}
</script>
子组件 Child.vue
<template>
  <div>{{ parentMessage }}</div>
</template>
<script>
export default {
  inject: ['parentMessage']
}
</script>