在原生js中加载一个vue，props传参

在JavaScript原生环境中加载Vue并使用Props传参通常涉及以下几个步骤：

1. **安装Vue**：首先需要在项目中引入Vue，可以使用npm或CDN链接。例如，通过npm安装：

   npm install vue

或者在HTML中直接引用CDN：

   <script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.js"></script>

2. **创建Vue实例**：然后在JavaScript中创建一个新的Vue实例，并配置它接受props。例如：

   const app = new Vue({
     el: '#app', // 应用挂载到id为'app'的元素上
     data: {}, // 初始化数据
     props: { // 定义接收的props
       message: {
         type: String, // 属性类型
         required: true, // 是否必填
         default: 'Hello from parent!' // 默认值
       }
     },
     mounted() {
       console.log(this.message); // 使用props打印消息
     }
   });

3. **父组件传递props**：在调用这个Vue实例的地方，通过`v-bind`或`.bind()`将props传递给它。例如在模板中：

   <div id="parent">
     <child-component :message="parentMessage"></child-component>
   </div>

   <!-- 父组件 JS -->
   const parent = {
     data() {
       return {
         parentMessage: 'Parent component is sending a message'
       };
     }
   };

   // 如果使用ES6模块化
   import ChildComponent from './ChildComponent.vue';
   const parentDOMElement = document.getElementById('parent');
   parentDOMElement.appendChild(new ChildComponent(parent).$mount());

4. **子组件接收props**：在子组件（如ChildComponent.vue）中，通过`props`选项声明来接收props。在组件内部可以直接使用`this.$props`访问。