vue 怎么给根组件（createApp）传值？

Question

vue
1.怎么给根组件（createApp）传值？
2.在根组件中如何调用子组件的方法？

比如，我有两个文件

// afile.ts
const info = "传递给foo"
const vueapp = createApp(AComponent).mount('.container')



//AComponent.vue
 foo(info :string){
        console.log(info );  //这里输出 "传递给foo" 
        return '返回值'
 }

我想在afile.ts中调用AComponent.vue中的foo方法，先把info专递给foo，然后在afile.ts取得foo返回的 '返回值'。

Answer 1

参考gpt：
结合自己分析给你如下建议：
如果您想给根组件（createApp）传值，您可以使用以下的方法：
您可以在createApp函数的第二个参数中传递一个对象，作为根组件的props。这样，您可以在根组件中通过this或props访问传递的值。例如：

// afile.ts const info = “传递给foo” const vueapp = createApp(AComponent, { info }).mount(‘.container’)

// AComponent.vue export default { props: [‘info’], methods: { foo() { console.log(this.info); // 这里输出 “传递给foo” return ‘返回值’ } } }

您也可以在createApp函数的第一个参数中传递一个函数，作为根组件的setup函数。这样，您可以在setup函数中通过参数访问传递的值。例如：

// afile.ts const info = “传递给foo” const vueapp = createApp((props) => { const foo = () => { console.log(props.info); // 这里输出 “传递给foo” return ‘返回值’ } return { foo } }, { info }).mount(‘.container’)

如果您想在根组件中调用子组件的方法，您可以使用以下的方法：

您可以在根组件中使用$refs属性来获取子组件的实例，然后通过实例调用子组件的方法。例如：

// AComponent.vue <template> <div> <b-component ref=“bComp”></b-component> <button @click=“callB”>调用B组件的方法</button> </div> </template>

<script> import BComponent from ‘./BComponent.vue’ export default { components: { BComponent }, methods: { callB() { this.$refs.bComp.bar(); // 调用B组件的bar方法 } } } </script>

// BComponent.vue <template> <div>B组件</div> </template>

<script> export default { methods: { bar() { console.log(‘B组件的bar方法被调用’); } } } </script>

您也可以在子组件中使用emit事件来触发根组件的方法，然后在根组件中使用on监听事件并执行相应的方法。例如：

// AComponent.vue <template> <div> <b-component @baz=“callB”></b-component> </div> </template>

<script> import BComponent from ‘./BComponent.vue’ export default { components: { BComponent }, methods: { callB() { console.log(‘A组件的callB方法被调用’); } } } </script>

// BComponent.vue <template> <div>B组件</div> </template>

<script> export default { mounted() { this.$emit(‘baz’); // 触发baz事件 } } </script>