vue的组件与组件内传参

1.在src/components文件夹中新建一个 test 组件,组件内容可自定义

2.组件创建成功之后,我们在其他页面直接调用

3.页面的效果

4.接下来我们可以定义一个复杂一点的组件,添加组件参数

父组件传值给子组件

子组件内容

父组件内容


程序运行图

这里我们发现,子组件的msg已经被父组件传过去的值给替换了
传值成功啦。

子组件传值给父组件

vue官网里面是这么说的:“所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。”也就是说vue禁止子组件向父组件传值。
但是,如果我们真的想从子组件向父组件传值,可以通过事件来触发(这里用的是点击事件)

子组件内容

父组件内容

点击按钮打印结果

这样就可以获取到子组件的参数内容了。

还有很多的用法,需要自己去慢慢了解啦。

posted @ 2020-11-17 10:26  潘潘潘的博客  阅读(224)  评论(0编辑  收藏  举报