使用vue.component全局注册组件、props的使用

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
    <my-button :text="buttonText"></my-button>
  </div>
</template>
 
<script>
  // 首先定义组件
  const MyButton = {
    props: ['text'],
    template: `<button>{{ text }}</button>`
  }
 
  export default {
    components: {
      'my-button': MyButton
    },
    data() {
      return {
        title: '组件使用示例',
        content: '这是一个使用Vue.js组件的示例。',
        buttonText: '点击我'
      }
    }
  }
</script>

这个简单的Vue.js示例展示了如何在一个Vue实例中局部注册一个组件，并且如何通过props向该组件传递数据。在这个例子中，我们定义了一个简单的按钮组件MyButton，并在父组件中通过<my-button :text="buttonText"></my-button>使用它，同时展示了如何使用props来接收外部传递的数据。