关于 props 路由组件传参

Question

看 vue-router 官网对这个知识点无法理解：
官网：在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性，使用 props 将组件和路由解耦。

问题：用 props 来接受 route.params 参数，这么做的好处除了能使函数式编程也能接受到路由参数以外，还有什么好处么？

官网：请尽可能保持 props 函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义 props，请使用包装组件，这样 Vue 才可以对状态变化做出反应。
问题：如果要定义一个有状态的 props 函数，是否就是得到的值可以通过 props 函数外部进行修改，那么为什么只有包装组件才可以对状态变化作出反应？包装组件是否是通过函数式组件（无响应式数据组件）将多个组件包装成一个组件？比如官网中的一段示例代码：

var EmptyList = { /* ... */ }
var TableList = { /* ... */ }
var OrderedList = { /* ... */ }
var UnorderedList = { /* ... */ }

Vue.component('smart-list', {
  functional: true,
  props: {
    items: {
      type: Array,
      required: true
    },
    isOrdered: Boolean
  },
  render: function (createElement, context) {
    function appropriateListComponent () {
      var items = context.props.items

      if (items.length === 0)           return EmptyList
      if (typeof items[0] === 'object') return TableList
      if (context.props.isOrdered)      return OrderedList

      return UnorderedList
    }

    return createElement(
      appropriateListComponent(),
      context.data,
      context.children
    )
  }
})

Answer 1

ustbhuangyi 2020-02-28 15:38:48

问题：用 props 来接受 route.params 参数，这么做的好处除了能使函数式编程也能接受到路由参数以外，还有什么好处么？

答：好处是在于组件不依赖于 $route ，还是通过正常的 props 来决定渲染，这样的话这个组件既可以作为路由组件，也可以作为普通组件复用。

问题：如果要定义一个有状态的 props 函数，是否就是得到的值可以通过 props 函数外部进行修改，那么为什么只有包装组件才可以对状态变化作出反应？包装组件是否是通过函数式组件（无响应式数据组件）将多个组件包装成一个组件？

答：因为 props 函数只会根据参数 route 计算，它是无状态的，只会在路由发生变化时才会变化。如果需求是根据一些不同的状态去传递不同的 props，那么只需要在你的路由组件外部包装一个组件，在这个组件内部去定义一些数据状态，根据不同的状态传递给被包装的组件，并且把接受到的路由 props 传递下去。包装组件不一定是函数组件，普通的 Vue 组件就可以。