访问单页组件中的属性- VueJS 2.x

在VueJS 2.x中，要访问单页组件中的属性，可以通过以下几种方式实现：

Props（属性传递）：通过在父组件中使用v-bind指令将数据传递给子组件的props属性，子组件就可以访问这些属性。在子组件中，可以通过this关键字访问props属性。例如：

// 父组件
<template>
  <child-component :message="hello"></child-component>
</template>

<script>
export default {
  data() {
    return {
      hello: 'Hello World!'
    }
  }
}
</script>

// 子组件
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
}
</script>

在上述例子中，父组件通过v-bind指令将hello属性的值传递给子组件的message属性，子组件通过this.message访问该属性。

$attrs：如果你想在子组件中访问父组件传递的所有属性，可以使用$attrs对象。$attrs对象包含了父组件传递给子组件但子组件没有声明的属性。例如：

// 父组件
<template>
  <child-component :message="hello" :count="5"></child-component>
</template>

<script>
export default {
  data() {
    return {
      hello: 'Hello World!'
    }
  }
}
</script>

// 子组件
<template>
  <div>{{ message }}</div>
  <div>{{ count }}</div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$attrs); // 输出：{ count: 5 }
  }
}
</script>

在上述例子中，父组件传递了message和count属性给子组件，子组件通过this.$attrs访问count属性。

$props：如果你想在子组件中访问父组件传递的所有props属性，可以使用$props对象。$props对象包含了父组件传递给子组件的所有props属性。例如：

// 父组件
<template>
  <child-component :message="hello" :count="5"></child-component>
</template>

<script>
export default {
  data() {
    return {
      hello: 'Hello World!'
    }
  }
}
</script>

// 子组件
<template>
  <div>{{ $props.message }}</div>
  <div>{{ $props.count }}</div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$props); // 输出：{ message: 'Hello World!', count: 5 }
  }
}
</script>

在上述例子中，父组件传递了message和count属性给子组件，子组件通过this.$props访问这些属性。

以上是在VueJS 2.x中访问单页组件中属性的几种常用方式。在实际开发中，根据具体情况选择合适的方式来访问属性。对于更复杂的情况，还可以使用计算属性或者监听属性的变化来实现更高级的功能。