- 博客(4)
- 收藏
- 关注
RSS订阅原创 组建通信之嵌套组件的传值
当有如下的组件关系：我们怎么由App组件向B组件传值呢，这里我们利用provide和inject来实现，在App组建中声明provide来提供变量，然后在B层子组件中利用inject接收注入，这种方法可以实现更多层的嵌套组件传值，下面看代码：这里我们在App中利用provide来return出一个变量msg，直接在B组件中声明inject来接收，可以直接在template中使用。总结：利用provide（提供）和inject（注入）可以实现多层组件的嵌套传值。...
2020-10-05 13:18:29
220
原创 组件通信之平行组件之间的通信
说完父子组将的通信，这里写一下平行组件之间的通信看一下关系图这里创建三个组件，其中App组件作为父组件，包含着A，B两个子组件，现在我们要实现的是A，B两个平行组件之间的传值。具体到要实现的功能是：给B组件初始化一个count值，A组件为一个点击按钮，每次点击A中的按钮，B中的数值加1。下面看代码实现：解释：这里我们在全局注册了A,B连个组件，然后写入了App组件中。具体到怎么实现点击A组件来触发B组件呢。①首先，我们new一个Vue实例，取名为bus，来帮助我们实现后面的传值。②在B组件的creat
2020-10-05 12:49:57
328
原创 组件之间的通信之父子组件通信
父子组件之间的通信由父组件向子组件传值： 通过props进行通信。下面先看具体实现上面这段代码的关键点在于：①首先子组件中要声明出props属性，它的作用就是接收来自父组件的值②其次，在父组件中找到对应的子组件，并在子组件中通过v-on（简写:）将需要传递的值进行绑定。③通过前两步就实现了父传子的过程，最后只需要将传来的数据在需要处显示即可<h4>{{childData}}</h4> //props接收到的值在这里用插值表达式的形式表现出来由子组件向父组件传值：关键点$emit
2020-10-04 16:49:34
422
原创 vue组件化and全局组件和局部组件的创建及使用
关于vue的组件化，以及全局组件、局部组件的创建和使用①组件化 ：首先要简单的理解组件化，这里引用vue官网的一张图在这里，我们可以将整个页面看作一个根组件，向下分支的三个子组件，分别是页头、侧边栏、内容区。侧边栏里面可以看到有两栏内容，对应右边第二行中间的侧边栏组件又向下分支出两个子组件。所以，对于我们的页面可以看成由大到小，由上到下的组件嵌套，由此就衍生出了类似父子组件，兄弟组件这种组件之间的关系，可以使得整个页面系统化。②局部组件与全局组件 再看一张图**以这张图为例子，上面的导航栏组件和左
2020-10-04 14:07:03
716
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人