vue组件封装，组件向引用页面传值

好的，针对您的问题，我可以给您提供一个简单的Vue组件的代码示例，该组件封装了一个名为`text`的字符串类型的prop属性，并且在组件内部将这个属性的值通过事件`input`传递给了父组件，从而实现了组件向引用页面传值的功能。您可以将这个示例代码集成到您的项目中，也可以根据自己的需求进行修改：

<template>
  <div>
    <input type="text" :value="text" @input="$emit('input', $event.target.value)">
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    text: {
      type: String
    }
  }
}
</script>

在这个组件中，我们使用了Vue的`props`属性来声明一个名为`text`的prop属性，类型为字符串类型。在模板中，我们使用了Vue的`v-bind`指令将`text`绑定到了一个输入框的`value`属性上，并且监听了输入框的`input`事件。当输入框的值发生变化时，我们通过`$emit`方法触发了一个名为`input`的事件，并将输入框的新值作为参数传递给了这个事件。

在使用这个组件的时候，我们可以在父组件中使用`v-model`指令来绑定组件的`text`属性。例如：

<template>
  <div>
    <my-component v-model="message"></my-component>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import MyComponent from '@/components/MyComponent'

export default {
  name: 'App',
  components: {
    MyComponent
  },
  data() {
    return {
      message: 'Hello, World!'
    }
  }
}
</script>

在这个示例中，我们使用了`v-model`指令将`my-component`组件的`text`属性绑定到了父组件的`message`属性上。这样，当`my-component`组件的输入框的值发生变化时，`message`的值也会随之变化，并且在页面上展示出来。