父组件中引入子组件(import)import xxx from "xxx";
页面中(父组件)插入子组件,举例:
<TeacherEvaluation :is-show.sync="evaluateTeacher" :freeclass_id="freeClassId" :listen_category="listen_category" @toggle="handlerTeacher" @updateData="handleUpdate"></TeacherEvaluation>
:表示在当前插入组件的页面需要传给子组件的值,比如:freeclass_id="freeClassId" 就是在当前页面中把freeClassId的值传到子组件中
@表示子组件传到父组件(当前插入组件的页面)的数据,比如@toggle就是在子组件中用this.$emit('toggle',‘需要传的值’)方法给父组件发送数据
子组件中接收父组件传来的值,用props属性
props数据格式:
数组形式:props:[ 'valueName1','valueName2']-----可以作为子组件的一个变量使用;
对象形式:props:{valueName:{type:string,default:'value'}}------可以规定传输过来的值的数据类型和默认值但不能作为子组件内部变量使用
除了上面的子父组件间传值的方式外,还有一种非子父组件间传值eventBus的方式,在项目的utils文件中建一个event.js文件
在需要传值的页面中引入import eventBus from '@/utils/event.js',需要把数据发送出去的时候使用eventBus.$emit('sectionChange(方法名)',this.currentLesson(发送的数据))
在需要接收的页面中也需要引入引入import eventBus from '@/utils/event.js',需要接收值的时机使用eventBus.$on('sectionChange(方法名)', (data,数据) => {console.log('test', data);});就可以接收到其他页面中传过来的数据