vue语法基础二-组件

组件

Vue组件	说明	注册	使用
全局组件	所有实例都能用全局组件。	Vue.component(tagName, options)
局部组件	在实例选项中注册局部组件	var Child = {template: ' 自定义组件! '}	' music-list ': Child //music-list只在父模板可用

1.全局组件

• 注册一个全局组件语法格式如下：Vue.component(tagName, options)
• tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

2.局部组件

父子组件通信	操作
父组件传给子组件	Prop传递自定义属性
子组件传给父组件	自定义事件

父传子---Prop

prop 是父组件用来传递数据的一个自定义属性。

//1.父组件的数据需要通过 props 把数据传给子组件

//2. 动态 Prop, parentMsga是父组件的数据变量


Vue.component('child', {
  // 子组件需要显式地用 props 选项声明 "prop"
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '{{ message }}'
})
// 创建根实例
new Vue({
  el: '#app',
  data: {
    parentMsg: '父组件内容'，
  }
})

//子组件

//父组件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

子传父---自定义事件

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

//子组件 ButtonCounter.vue

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。v-on:increment

//父组件