💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
1.在src/components文件夹中新建一个 test 组件,组件内容可自定义 ![](https://box.kancloud.cn/818e6636cea0d4e6304406e70221aa09_510x523.png) 2.组件创建成功之后,我们在其他页面直接调用 ![](https://box.kancloud.cn/44a508a7baf8b8d4d7cbfc22584730c3_746x499.png) 3.页面的效果 ![](https://box.kancloud.cn/dbada70e5f872f20c2c2dc0326e5dd9b_1074x522.png) 4.接下来我们可以定义一个复杂一点的组件,添加组件参数 # **父组件传值给子组件** ## 子组件内容 ![](https://box.kancloud.cn/2a5a3a470e2cec0b63159477fa17d16e_847x662.png) ## 父组件内容 ![](https://box.kancloud.cn/145c19bb9c96ff0c7d0158ab5946fbd3_729x597.png) 程序运行图 ![](https://box.kancloud.cn/740031bcab748b3ea7ff43a5b78f4632_491x341.png) 这里我们发现,子组件的msg已经被父组件传过去的值给替换了 传值成功啦。 # **子组件传值给父组件** vue官网里面是这么说的:“所有的 prop 都使得其父子 prop 之间形成了一个**单向下行绑定**:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。”也就是说vue禁止子组件向父组件传值。 但是,如果我们真的想从子组件向父组件传值,可以通过事件来触发(这里用的是点击事件) ## 子组件内容 ![](https://box.kancloud.cn/d523aa725b532fe4ccb323554d4a954a_1071x810.png) ## 父组件内容 ![](https://box.kancloud.cn/7dda9f974995e571bdd6714613fee222_820x588.png) 点击按钮打印结果 ![](https://box.kancloud.cn/5dc446a3ba15d0d7bc4719107eab4b47_908x388.png) 这样就可以获取到子组件的参数内容了。 还有很多的用法,需要自己去慢慢了解啦。 **有不了解的或者有需要的可加 Q 3303806241**