资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Vue组件之props,$emit与$on以及slot分发

Vue组件之props,$emit与$on以及slot分发

levy9527 / 1185人阅读

摘要：组件实例之间的作用域是孤立存在，要让它们之间的信息互通，就必须采用组件的通信方式用于父组件向子组件传达信息静态方式以数组的形式发出自己所需要的信息至于父亲给不给，就由父亲说了算，父作用域给予回应，将回应回去，儿子得到自己想要的，然后展

组件实例之间的作用域是孤立存在，要让它们之间的信息互通，就必须采用组件的通信方式

props用于父组件向子组件传达信息

1.静态方式

eg:

props以数组的形式发出自己所需要的信息(至于父亲给不给，就由父亲说了算)，父作用域给予回应，将message=‘hello’回应回去，儿子得到自己想要的，然后展现在html结构中;

2.动态获取数据

子组件要得到父亲口袋里面的东西（实例里面的数据），必须通过v-bind类似于绑定结构属性的方式发送给子组件；

eg:

渲染结果为：


   

     
zhangsan---name---0

     
man---sex---1

     
science---job---2

注意：在组件里面用v-for一定要写个外层标签包着v-for，因为大哥只能有一个，不能写并行标签

当然也可以传递方法给子组件

如果传递过来的方法中带有父组件里面的属性，也可以用

eg:

弹出框显示hello, world

由此我们可以得出：父组件传递给子组件的是一个引用地址，但是这个引用是单向的，只能父组件改变的时候子组件获得的信息也会发生变化，但是子组件不可以去更改父组件传递过来的值，但是可以去加工

eg:

弹出框显示：hello,world i am god

eg:

显示结果：

1.gif

props可以用来规定自己需要的数据类型，此时props将需求以对象的形式呈现，儿子开始挑剔了，但是父亲给他的不符合要求时候，它便会报错，但是毕竟是父亲给的，所以还是会渲染出来

eg：





显示结果：

blob.png

关于儿子组件的具体挑剔要求，我直接引个官网文档，就不做过多说明了

Vue.component("example", {
props: {

// 基础类型检测 (`null` 意思是任何类型都可以)
propA: Number,
// 多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
  type: String,
  required: true
},
// 数字，有默认值
propD: {
  type: Number,
  default: 100
},
// 数组/对象的默认值应当由一个工厂函数返回
propE: {
  type: Object,
  default: function () {
    return { message: "hello" }
  }
},
// 自定义验证函数
propF: {
  validator: function (value) {
    return value > 10
  }
}

}
})

$emit与$on，关于这一对兄弟，接触过angular.js和react的应该都很熟悉，$emit是发射的意思，$on 为监听，主要用于子组件向父组件传递信号，当然，儿子广播出去，父亲听不听就是父亲的事情了

eg:


{{a}}



显示如下：

1.gif

父亲在监控ok,每当听到儿子通过$emit发送过来ok时候，父亲就开始执行自己的add方法

当然儿子也可以向父亲传递信息过去

eg:


{{a}}



显示效果：

1.gif

儿子将自己的i值传递给父亲，父亲通过接收到的i值将自己的a值更改

监听原生事件的时候，父亲只需要在自己的监听器上加一个炫酷特效.native,儿子不需要去发广播，父亲就会知道，也就是说有些事情只要老爸愿意了解，不需要儿子去告诉，他自己也可以选择知道

eg:


{{a}}



显示结果：

1.gif

除了父子直接可以互相通信外，子组件直接互相通信，需要一个子组件先将信息传递给父组件，父组件再交给另一个子组件

eg:


我是父亲且a为：{{a}}




显示结果为：

slot分发模式主要用于在组件中间插入标签或者组件之间的相互嵌套

单个内容插入，可以选择用slot标签事先占个位置

eg:



slot分发


渲染结果为：

  
我就是：slot分发

也就是说slot类似于一个插槽，提前站好一个位置，要插入组件中的标签类似于卡，插入提前站好位置的插槽中

多个标签插入，就需要按照名字一一对号入座

eg:



    
我是1号卡片

    
我是2号卡片

    
我是3号卡片




渲染结果为：

作用域插槽还是有点抽象的，也就是子组件充当插槽，父组件将内容插在子组件上面，并且子组件将值传递给父组件，父组件用scope="props"来接收子组件传过来的值





渲染结果为：

eg:







渲染结果：

动态组件通过component来动态切换组件的内容

eg:




渲染结果为：

带图原文地址http://www.cnblogs.com/douyae...

idc机房托管 专线服务 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88930.html

相关文章

  • Vue-组件详解

    摘要：除了监听事件外，还可以用于组件之间的自定义事件。它仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算属性中使用。将和合并成，会自动去判断是普通标签还是组件。子组件这里的状态绑定的是父组件的数据。 查看原文站点，更多扩展内容及更佳阅读体验！ 组件详解 组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。 全局注册 Vue.component(my-com...

    dadong 评论0 收藏0

  • Vue.js-组件详解

    摘要：事件总线事件总线首先创建了一个名为的空的实例然后全局定义了组件最后创建了实例。在父组件模板中，子组件标签上使用指定一个名称，并在父组件内通过来访问指定名称的子组件。 学习笔记：组件详解 组件详解 组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。 全局注册 Vue.component(my-component, {}); 要在父实例中使用这个组件，必须要...

    jeffrey_up 评论0 收藏0

  • Vue.js非常重要之组件

    摘要：它们之间必然需要相互通信父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。父组件通过向下传递数据给子组件，子组件通过给父组件发送消息。这是由使用的父组件决定的。 Vue.js的组件 注册组件 全局注册 要注册一个全局组件，你可以使用 Vue.component(tagName, options)。例如： Vue.component(my-component, { ...

    ysl_unh 评论0 收藏0

  • Vue 的组件

    摘要：组件上一篇的表单输入绑定使用组件注册组件首先我们要创建一个实例要注册一个全局组件，你可以使用。使用传递数据组件实例的作用域是孤立的。这意味着不能也不应该在子组件的模板内直接引用父组件的数据。 组件 上一篇：Vue的表单输入绑定：https://segmentfault.com/a/11... 使用组件 注册组件 首先我们要创建一个实例： new Vue({ el:.exp, ...

    kk_miles 评论0 收藏0

发表评论

登陆后可评论

0条评论

levy9527

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<