Vue组件间传值的方式

• 父传子:在父组件中给子组件标签上绑定一个属性， 属性上挂载需要传递的值，在子组件通过 props:['自定义属性名'] 来接收数据。

<template>   <!-- 父组件 -->   <div>     <Child :message="son1" v-if="typeCode == '0'"></Child>   </div> </template>  <script> // 引入子组件 import Child from "./subassembly/son.vue"; export default {   data() {     return {      // typeCode: "0",//通过"0" "1"判断显示哪个页面；0：子组件1页面；1：子组件2页面       typeCode: "0",       son1:"儿子"          };   },   //一定要注册组件   components: {        Child   }, }; </script> 

 son.vue

<template>   <!-- 子组件1 -->   <h2>我是子组件1<br />接收父组件值：{{ message }}</h2> </template>  <script> export default {   data() {     return {};   },   props: {     // message用于接收     message: {       type: String, //验证类型，也可以验证其他类型       default: "", //如果父组件传值，则用父组件的值渲染，反之使用默认值     },   },   mounted() {     console.log(this.message); //父组件传递过来的数据   }, }; </script>  

• 子传父:在子组件中自定义一个事件，调用这个事件后，子组件通过 this.$emit('自定义事件名',要传递的数据) 发送父组件可以监听的数据，最后父组件监听子组件事件，调用事件并接收传递过来的数据。

<template>   <!-- 子组件1 -->   <button @click="seedOnclick">我是子组件1</button> </template>  <script> export default {   data() {     return {       son1: "我是儿子", //子传父要传递的值     };   },   methods: {     seedOnclick() {       this.$emit("son", this.son1); //参数1：自定义事件；参数2：要传递的值     },   }, }; </script> 

<template>   <!-- 父组件 -->   <div>     <Child @seed="seedAccept" v-if="typeCode == '0'"></Child>       </div> </template>  <script> // 引入子组件 import Child from "./subassembly/son.vue"; export default {   data() {     return {       //typeCode: "0", //通过"0" "1"判断显示哪个页面；0：子组件1页面；1：子组件2页面         typeCode: "0",     };   },   //一定要注册组件   components: {     Child,     Electronic,   },   methods: {     seedAccept(data) {       console.log(data, "子组件传给父组件的值");     }       }, }; </script> 

路由参数传递:

query

通过query传参  <router-link :to="{         path:'/home/message/detail',         query:{              id: msg.id,              title:msg.title         }        }">     点击打开详细-{{msg.id}} </router-link>-->  简化请求路径 在index.js 中 通过name属性为路由 别名 path:'detail', name:'dt', component:Detail   使用时 通过name属性触发路由  注意 name 不能同名  <router-link :to="{         name:'dt',//使用name进行路由         query:{              id: msg.id,              title:msg.title         }        }">     点击打开详细-{{msg.id}} </router-link>--> <h2>消息编号：{{ $route.query.id }}</h2> <h2>消息标题：{{ $route.query.title }}</h2>

paramms

路由参数 params 参数 传递 path: 'detail/:id/:title', //使用占位符  声明 接收 name: 'dt', component: Detail, <router-link :to="{           name:'dt',           params:{              id: msg.id,              title:msg.title           }         }">   点击打开详细-{{msg.id}} </router-link> 获取  <h2>消息编号：{{ $route.params.id }}</h2>  <h2>消息标题：{{ $route.params.title }}</h2>

props

props 参数的传递 index.js props:['',''] props：true  将params的参数 转换为props格式  props($route) {     return{         id:$route.params.id,         title:$route.params.title     } } 在目标组件中 声明属性   props: ['id', 'title']