vue组件传值有什么方式_vue组件传值有哪些方式-常见问题-PHP中文网

vue组件传值有什么方式

betcha

发布： 2023-07-18 09:32:34

原创

1244人浏览过

组件传值方式：1、通过路由进行传值；2、通过在父组件中让子组件标签绑定父组件的数据，子组件的props接收父组件穿过来的值，子组件的props接收父组件传的值；3、子组件向父组件传值，用“this.$emit”来遍历getData事件；4、非父组件之间传值，一个绑定“this.on”事件，一个触发“this.$ emit”事件，或者在本地存储中添加公共数据，可以在两个页面中获取

vue组件传值有什么方式

vue组件传值的方式：

1、路由传参

步骤：

①定义路由时加上参数props: true，在定义路由路径时要留有参数占位符: name『用法:to="'路径/'＋value"』

立即学习“前端免费学习笔记（深入）”；

②在跳转到的页面加上参数props:['name']

③在跳转到的页面就获取到了name『用法: js中直接this. name；html中直接插值{{ name}}』

2、父组件向子组件传值

父组件向子组件传值就是通过在父组件中让子组件标签绑定父组件的数据，子组件的props接收父组件穿过来的值即可

步骤：

①父组件内设置要传的数据『data(){ parentid: value}』

②在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上『< myBtn :childid='parentid'></ mybtn>』

③在子组件添加参数props:['childid'],即可

代码：

<div id="app"><br/>    <mybtn :childid='parentid' title="我是标题"></mybtn><br/></div><br/><script><br/>    new Vue({<br/>        el:"app",<br/>        data:{<br/>            parentid:"88888"<br/>        },<br/>        components:{<br/>            "mybtn" : {<br/>                props: ['childid','title'],<br/>                template: '<button>我是{{childid}}号按钮{{title}}</button>'<br/>            }<br/>        }<br/>    })<br/></script><br/>

登录后复制

结果展示：

沉浸式翻译

沉浸式翻译：全网口碑炸裂的双语对照网页翻译插件

查看详情

3、子组件向父组件传值

子传父的实现方式就是用了 this.e m i t 来遍历 getData 事件，首先用按钮来触发setData事件，在setData中用this.emit 来遍历 getData 事件，最后返回 this.msg

步骤：

①由于父组件需要参数，所以在父组件中的标签上定义自定义事件，在事件内部获取参数；『@myEvent=" callback"在callback函数中接收参数』

②在子组件中触发自定义事件，并传参。『this.$emit('父组件中的自定义事件',参数)』

代码：

<template><br/>  <div><br/>      <mybtn :style="{color:acolor,background:bcolor}" @changeColorEvent="getColor" :parentid="childid" title="我是标题"></mybtn><br/>  </div><br/> <br/></template><br/><script><br/> <br/>  export default {<br/>    name : 'test',<br/>    data () {<br/>      return {<br/>        childid:"666",<br/>        acolor:'blue',<br/>        bcolor:'red'<br/>      }<br/>    },<br/>    methods:{<br/>      getColor(colors){<br/>        //父组件就可以拿到子组件传过来的colors<br/>        console.log(colors)<br/>        this.acolor = "white";<br/>        this.bcolor = colors;<br/>      },<br/>      //接收多个参数<br/>      /*getColor(colors1,colors2){<br/>        console.log(colors1,colors2)<br/>        this.acolor = colors2;<br/>        this.bcolor = colors1;<br/>      }*/<br/>    },<br/>    components: {<br/>      'mybtn' : {<br/>        props : ['parentid','title'],<br/>        template : `<br/>          <div class="box"><br/>            <p>我最初是一张白纸</p><br/>            <button @click="changeColor">我是{{parentid}}号按钮{{title}}</button><br/>          </div><br/>        `,<br/>        methods: {<br/>          changeColor(){<br/>          //这个方法是触发父组件中的事件，第一个参数是触发的事件名称。第二个参数及以后是向changeColorEvent传的参数<br/>           this.$emit('changeColorEvent',"orange")<br/>           //发送多个参数可以直接跟在后面<br/>           //this.$emit('changeColorEvent',"orange","white")<br/>          }<br/>        }<br/>      }<br/>    }<br/>  }<br/></script><br/><style scoped><br/> <br/></style><br/>

登录后复制