手把手教你学Vue-2(组件开发)

lansheng228 发布于2019-08-30 14:17 / 2589人阅读

摘要：组件声明组件分为全局的和局部的。父组件通过给子组件下发数据，子组件通过事件给父组件发送消息。以下实例中子组件已经和它外部完全解耦了。

1.vue 组件-声明

组件分为全局的和局部的。

全局声明

Vue.component(tagName, options) **

引用组件

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

查看线上演示效果
-- todo
这里后期根据应用谈一下两者的好处和实际应用

组件的data 必须是一个函数

Vue.component("simple-counter", {
  template: "",
  // 技术上 data 的确是一个函数了，因此 Vue 不会警告，
  // 但是我们却给每个组件实例返回了同一个对象的引用
  data: function () {
    return{
    counter:0
    }
  }
})

new Vue({
  el: "#example-2"
})

2. 父子组件的传值-props


    
      
    

// 注册
Vue.component("child", {
  // 声明 props
  props: ["message"],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: "{{ message }}"
})
// 创建根实例
new Vue({
  el: "#app",
  data:{
    message:"hello",
  }
})

3. 父子组件的值相互传递

在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。


    
      {{ total }}

云服务器 GPU云服务器手把手教你做图像识别手把手教你阿里云服务器搭建商城一个教你开发小程序的小程序组件开发

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

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

手把手教你学Vue-2(组件开发)

摘要：组件声明组件分为全局的和局部的。父组件通过给子组件下发数据，子组件通过事件给父组件发送消息。以下实例中子组件已经和它外部完全解耦了。 1.vue 组件-声明组件分为全局的和局部的。全局声明 Vue.component(tagName, options) ** 引用组件 // 注册 Vue.comp...

Null 2019-08-22 15:49 评论0 收藏0
手把手教你学Dapr

摘要：配置配置使用概率抽样。采样率定义了对跟踪跨度进行采样的概率，其值可以介于和含之间。例如，以下配置对象将采样率更改为即每个跨度都被采样，并使用协议将跟踪发送到位于的服务器文件路径注将采样率更改为会完全禁用跟踪。目录手把手教你学Dapr - 1. .Net开发者的大时代手把手教你学Dapr - 2. 必须知道的概念手把手教你学Dapr - 3. 使用Dapr运行第一个.Net程序手把手教你学Da...

qqlcbb 2021-11-18 10:07 评论0 收藏0
手把手教你学vue-4（vuex）

摘要：管理统一组件状态。映射到组件将映射为也支持载荷将映射为将映射为概念允许我们将分割成模块。每个模块拥有自己的类似里面的针对每个组件对应的状态做处理的状态的状态对于模块内部的，局部状态通过暴露出来，根节点状态则为。 1.首先明白vuex是做什么用的。管理统一组件状态state。每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻...

Hujiawei 2019-08-22 15:59 评论0 收藏0