1.vue 组件-声明

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

• 全局声明

  • Vue.component(tagName, options) **
  • 援用组件 <tagName></tagName>

    <div id="app">
        <runoob></runoob>
    </div>
     
    <script>
    // 注册
    Vue.component('runoob', {
      template: '<h1>自定义组件!</h1>'
    })
    // 建立根实例
    new Vue({
      el: '#app'
    })
    </script>

• 我们也能够在实例选项中注册部分组件，如许组件只能在这个实例中运用：

<div id="app">
    <runoob></runoob>
</div>
 
<script>
var Child = {
  template: '<h1>自定义组件!</h1>'
}
 
// 建立根实例
new Vue({
  el: '#app',
  components: {
    // <runoob> 将只在父模板可用
    'runoob': Child
  }
})
</script>

检察线上演示结果
— todo
这里后期依据运用谈一下二者的优点和现实运用

组件的data 必需是一个函数

Vue.component('simple-counter', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  // 技术上 data 的确是一个函数了，因而 Vue 不会正告，
  // 然则我们却给每一个组件实例返回了同一个对象的援用
  data: function () {
    return{
    counter:0
    }
  }
})

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

2. 父子组件的传值-props

<div id="app">
    <div>
      <child v-bind:message="parentMsg"></child>
    </div>
</div>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 一样也能够在 vm 实例中像 "this.message" 如许运用
  template: '<span>{{ message }}</span>'
})
// 建立根实例
new Vue({
  el: '#app',
  data:{
    message:"hello",
  }
})

3. 父子组件的值互相通报

在 Vue 中，父子组件的关联能够总结为 prop 向下通报，事宜向上通报。父组件经由过程 prop 给子组件下发数据，子组件经由过程事宜给父组件发送音讯。

父组件是运用 props 通报数据给子组件，但如果子组件要把数据通报归去，就需要运用自定义事宜！

我们能够运用 v-on 绑定自定义事宜, 每一个 Vue 实例都完成了事宜接口(Events interface)，即：

运用 $on(eventName) 监听事宜

运用 $emit(eventName) 触发事宜

别的，父组件能够在运用子组件的处所直接用 v-on 来监听子组件触发的事宜。

以下实例中子组件已和它外部完整解耦了。它所做的只是触发一个父组件体贴的内部事宜。

<div id="app">
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
</div>
 
<script>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementHandler: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})
</script>