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>
-
子组件向父组件进行数据的传递:
- 在子组件内部通过自定义时间进行数据的发送
<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>
- 父组件使用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 定义一个新的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进行数据的状态管理