vue组件中传值

父组件中引入子组件(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',‘需要传的值’)方法给父组件发送数据


示例1

子组件中接收父组件传来的值,用props属性

props数据格式:

数组形式:props:[ 'valueName1','valueName2']-----可以作为子组件的一个变量使用;

对象形式:props:{valueName:{type:string,default:'value'}}------可以规定传输过来的值的数据类型和默认值但不能作为子组件内部变量使用

示例2

除了上面的子父组件间传值的方式外,还有一种非子父组件间传值eventBus的方式,在项目的utils文件中建一个event.js文件


示例3

在需要传值的页面中引入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);});就可以接收到其他页面中传过来的数据

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。