Vue 基础面试题（2）关于组件和非父子组件传值

1.父子组件传递参数

父组件向子组件传递参数：
两种方式实现：

父组件在子组件的模板上定义一个属性值，这个属性值就是将要传递给子组件的数据

<template>
    <div>
      <v-content :childData="msg" :child-obj="childObj"></v-content>
    </div>
  </template>
  <script>
  import content from "./components/content";
  export default {
    components: {
      vContent: content
    },
    data() {
      return {
        msg: "向子组件传递的数据",
        childObj: {
          question: "向子组件传递的对象数据"
        }
      };
    }
  };
  </script>

子组件使用props对象进行父组件的数据接收，同时props可以进行相关的属性扩展

<template>
   <div>
       {{childData}}
       {{childObj}}
   </div>
 </template>

 <script>
 export default {
   props: {
     childData: {
       type: String,
       required: true,
       default: "当父组件没有传递数据的时候，默认值"
     },
     childObj: {
       type: Object,
       required: false,
       default() {
         return {
           msg: "由于是对象，子组件必须使用return的方式返回一个默认值"
         };
       }
     }
   }
 };
 </script>

可获得父组件的数据值，能够进行使用，但是不推荐修改

父组件内部定义name属性。子组件内部可以访问父组件的相关data

<script>
 import content from "./components/content";
 export default {
   name: "parent",  // 该属性可以在子组件内部访问
   components: {
     vContent: content
   },
   data() {
     return {
       msg: "向子组件传递的数据",
       childObj: {
         question: "向子组件传递的对象数据"
       }
     };
   }
 };
 </script>

子组件内部使用this.$parent.data相关数据进行访问

<script>
 export default {
   created() {
       // 可以正常访问父组件内部的数据值
       console.log(this.$parent.childObj);
   }
 };
 </script>

子组件向父组件进行数据的传递：
1. 在子组件内部通过自定义时间进行数据的发送
```
 <script>
  export default {
    data(){
        return {
            childMsg:'子组件向父组件发送的数据'
        }
    },
    created() {
        // 创建自定义事件名称，并且指定向父组件传递的数据值
        this.$emit('sendData2Parent',this.childMsg)
    }
  };
  </script>
```
父组件使用时间监听进行子组件的数据获取：
```
<template>
   <div>
     <v-content 
     @sendData2Parent="getChildData"
     >
     </v-content>
   </div>
 </template>

 <script>
 import content from "./components/content";
 export default {
   components: {
     vContent: content
   },
   methods: {
       getChildData(val) {
           // val值为默认的形参，当前子组件向父组件传递的数据值
           console.log(val)
       }
   },
 };
 </script>
```
1. 父组件使用extends属性继承子组件的数据值
```
<template>
    <div>
      <v-content></v-content>
    </div>
  </template>

  <script>
  import content from "./components/content";
  export default {
    name: "parent",  // 该属性可以在子组件内部访问
    extends:content,
    created() {
        //直接取子组件中的data数据
        console.log(this.childMsg);
    },
    components: {
      vContent: content
    }
  };
  </script>
```
特点：

vue最大的优点就是好维护，复用率高，其中最主要的原因及时一个页面是由很多个子组件拼接起来的，哪个模块需要优化改变，只需要去修改对应的组件即可。所以，各个组件之间肯定是需要相互联系，相互通讯的。

原因：

单向数据流:单向数据流的规定：状态只能从父组件向子组件进行传递，子组件使用props进行数据的接收，不推荐使用子组件进行父组件state的修改，这样会导致多个组件依赖这个state，容易产生混乱，如果想要修改，首先向父组件发送通知，由父组件进行修改，子组件内部通过computed属性来进行prop数据的过滤

2.非父子组件传递参数

三种方式实现：
1. 使用中间件进行数据的传递，实现方法：
  - 1 定义一个新的Vue实例化对象，这个对象用老注册与监听要传递的自定义事件（自定义事件里面包含了咱们的传递的数据）
  - 2 在两个相互共享数据的组件里面分别引入这个中间件，保证是一个相同的vue实例化对象
  - 3 在要发送数据的页面，进行事件的发布 Vue.$emit('事件名称',val)
  - 4 在接收这个数据的组件里面，要做事件的监听 Vue.$on('事件名称',callback(val) => val === 传递的数据值)

使用插件（pubsub-js）来实现数据的传递，实现方法：

1 安装插件、导入插件=> main.js文件导入这个插件，全局就可以使用他的方法

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 导入这个插件
import PubSub from 'pubsub-js'
new Vue({
    render: h => h(App),
}).$mount('#app')

2 在要发送数据的组件内部使用pubsub的一个方法 publish方法

 methods:{

        sendMsg() {
            // sendMsg => 本次的发布的事件名称
            // this.msg => 本次需要传递的数据
            PubSub.publish('sendMsg',this.msg)
        }
    }

3 在要接收数据的组件内部使用 pubsub的subscribe方法，进行数据的接收

   created() {
  // sendMsg => 事件名称 
  // 回调函数，有一个默认的形参，这个必须要有占位
  // data就是我们这次需要获取的数据
PubSub.subscribe("sendMsg", (e, data) => {
  console.log(data);
});

}, ``` 3. 使用vuex进行数据的状态管理

Vue 基础面试题（2） 关于组件和非父子组件传值

1.父子组件传递参数

2.非父子组件传递参数

Vue 基础面试题（2）关于组件和非父子组件传值