vueJs2.0学习笔记（六）-优快云博客

本文介绍了Vue.js中的组件概念，包括组件的注册方式、局部与全局注册的区别，以及如何使用data属性、props和自定义事件来进行数据传递和通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件

个人感觉组件就是以自定以的方式来在vuejs中完成想要实现的效果。vuejs建立在js之上，所有vuejs的效果都可以用js实现，但是太麻烦（不然也不会创造vuejs）。那么我们如果向更灵活的使用vuejs，突破本身的束缚，而又不使用native-js，那么vuejs的组件会是一个好的选择。

注册

创建实例：

new Vue({
  el: '#some-element',
  // 选项
})

注册全局组件：

Vue.component('my-component', {
  // 选项`这里写代码片`
})

一个完整的组件注册过程：

HTML：

<div id="example">
  <my-component></my-component>
</div>

JS：

// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
  el: '#example'
})

渲染的结果是：

<div id="example">
  <div>A custom component!</div>
</div>

局部注册

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 将只在父模板可用
    'my-component': Child
  }
})

data必须是函数

在vue的组件里，data的部分必须是函数。

props

props的作用是来传递数据。在父子组件中，每个组件理论上应该低耦合，而且每个组件的作用域是孤立的。所以要进行数据通信，必然需要接口传递数据。props就是这个接口。

我们来看一个简单的实例：
HTML：

<div id="test">
            <child message="hello!"></child>
</div>

JS：

Vue.component('child', {
                  // 声明 props
                  props: ['message'],
                  // 就像 data 一样，prop 可以用在模板内
                  // 同样也可以在 vm 实例中像“this.message”这样使用
                  template: '<span>{{ message }}</span>'
                })
            new Vue({
                el:"#test"
            })

自定义事件

我们知道父组件通过props和子组件传递数据。而子组件是通过自定义事件给父组件传递数据。

使用v-on绑定自定义事件。每一个vue的实例都存在一个事件接口。
v-on：on（eventName）来监听事件。
v-on：emit（eventName）来触发事件。
以上两种方式是分割了EventTarget，二者不是相同的运行程序。

转载于:https://www.cnblogs.com/comefuture/p/8305941.html