Routing props configuration

We wrote about routing value passing above. What we simulate is two. If we need more than one, we can’t write more than one. This will cause too much cumbersome code, which is not conducive to later maintenance. Then we may think of computing attributes. But computing properties is not the best solution, it also becomes code cumbersome, here we will learn a new configuration: routing props configuration . Its role is to make it easier for routing components to receive parameters.

Note: who receives things is written where we that the Detail component receives things, so props are written in his routing components

           What to pass and what to receive  We are passed by props, so we need to use props to receive

The first way of writing: the props value is an object, and all key-value combinations in the object will eventually be passed to the component through props 

(The hard-coded ones are rarely used but need to be known)

//在index.js
  props：{a:900,b:700}

//在组件页
<template>
	<ul>
		<li>消息编号：{
   
   {a;a}}</li>
		<li>消息标题：{
   
   {b:b}}</li>
	</ul>
</template>

<script>
	export default {
		name:'Detail',
		props:['a','b'],
	               }
</script>

The second way of writing: the value is a boolean value. If the boolean value is true, all the params parameters received by the routing component will be passed to the component in the form of props ( only for params parameters )

//在index.js页
props:ture

//在组件页
<template>
   <ul>
     <li>消息通知：{
   
   {id}}</li>
     <li>消息内容：{
   
   {title}}</li>

</ul>
</templata>

<script>
	export default {
                     props:['id','title']
                   }
</script>

 The third way of writing: the value is a function

//index.js
props($route){  //回调函数
    return {id:'$router.query.id',title:'你好啊'}
}

//组件页
<template>
	<ul>
		<li>消息编号：{
   
   {id}}</li>
		<li>消息标题：{
   
   {title}}</li>
	</ul>
</template>

<script>
	export default {
		name:'Detail',
		props:['id','title'],
	}
</script>

Then we have involved callback functions here. What is a callback function?

The callback function is defined and not called. But executed.

Let's talk about a new thing here called: continuous writing of structure assignment and result assignment

//index.js
props({query}){  //结构赋值
    return {id:'$router.query.id',title:'你好啊'}
}

//index.js
props({query:{id,title}}){  //结构赋值的连续写法
    return {id,title}
}