vue2 子组件props不仅设置默认值，而且在子组件页面渲染了默认值

在 Vue.js 2.x 中，你可以使用 `default` 属性来设置 props 的默认值，并且在子组件页面渲染默认值。

以下是一个简单的例子：

<!-- 父组件模板 -->
<template>
  <div>
    <child-component :my-prop="myProp"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      myProp: 'Hello world'
    }
  }
}
</script>

在子组件中，可以通过 `props` 来声明要接收的属性，以及使用 `default` 属性来设置默认值，并且在子组件页面渲染默认值：

<!-- 子组件模板 -->
<template>
  <div>
    <p>{{ myProp }}</p>
  </div>
</template>

<script>
export default {
  props: {
    myProp: {
      type: String,
      default: 'Default value'
    }
  }
}
</script>

在上面的例子中，子组件的 `myProp` 属性被声明为一个 `String` 类型，并且使用 `default` 属性设置默认值为 `'Default value'`，如果父组件没有传递 `myProp` 属性，子组件就会使用默认值 `'Default value'` 来渲染页面。如果父组件传递了 `myProp` 属性，子组件就会使用父组件传递的 `myProp` 属性来渲染页面。

需要注意的是，如果你的默认值是一个对象或数组等引用类型，那么你需要将它包装在一个函数中，以保证每个组件实例都有自己独立的引用。比如：

props: {
  myProp: {
    type: Object,
    default: () => ({ name: 'John', age: 30 })
  }
}

这样，每个组件实例都会有自己独立的 `{ name: 'John', age: 30 }` 对象引用，而不是共享同一个对象引用。