vue組件命名和傳值

一、vue組件命名:

組件有好幾種命名方式, 可以使用 component-vue (短橫線分隔命名)、componentVue  (駝峰式命名) 或ComponentVue  (單詞首字母)

因為html對大小寫不敏感, 所以在調用的時候駝峰命名的都要寫成短線分割形式:

以上三種都要寫成小寫短線這種形式:

<component-vue></component-vue>

 

在使用props傳值的時候也是這樣

Vue.component('blogPost', { 
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

<blogPost post-title="hello!"></blogPost>

 

一、vue傳值:

1.父傳子

父組件:

 <template>
      <div>       
        <child :input-name="name"></child>   //inputName就是要傳的值
      </div>
    </template>
    <script>
      import child from './child'  //引入子組件
      export default {
        components: {
          child
        },
        data () {
          return {
            name: ''
          }
        }
      }
    </script>

 

子組件:

    <template>
      <div>
        子組件:
        <span>{{inputName}}</span>
      </div>
    </template>
    <script>
      export default {
        props: {
          inputName: String, //定義傳值的類型為string
        },
　　　　　props:['inputName'], //普通傳值
      }
    </script>

2.子傳父: 子傳父需要通過事件來實現, 再用 this.$emit 傳送事件和值

子組件

       <template>
          <div>
            子組件:
            <!-- 定義一個子組件傳值的方法 -->
            <input type="button" value="點擊觸發" @click="childClick">
          </div>
        </template>
        <script>
          export default {
            data () {
              return {
              }
            },
            methods: {
              childClick () {
                // 第一個參數就是父組件要調用的方法
                // 第二個參數就是子組件要傳的值
                this.$emit('childByValue', this.childValue)
              }
            }
          }
        </script> 

 

父組件:

<template>
  <div>
    <!-- 引入子組件 定義一個on的方法監聽子組件的狀態-->
    <child v-on:childByValue="childByValue"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {

    },
    methods: {
      childByValue: function (childValue) {
            //childValue, 就只你傳過來的值
      }
    }
  }
</script>

3.非父子組件傳值: 非父子組件傳值, 需要用到一個中轉站, 這個中轉站一般用bus.js, 其用法和子傳父有點相似,

先創建一個bus, 在兩個需要傳值的文件引入, 在傳值的一方用 bus.emit 傳遞載荷, 在接受的一方用bus.$on接受

 

bus.js: 創建一個空的vue實例:

import Vue from 'vue'
export default new Vue()

 

A組件:

<template>
  <div>
    <input type="button" value="點擊觸發" @click="elementByValue">
  </div>
</template>
<script>
  // 引入公共的bug，來做為中間傳達的工具
  import Bus from './bus.js'
  export default {
    data () {      
    },
    methods: {
      elementByValue: function () {
        Bus.$emit('val', this.elementValue)
      }
    }
  }
</script>

B組件:

<template>
      <div>      
        <input type="button">
        <span>{{name}}</span>
      </div>
    </template>
    <script>
      import Bus from './bus.js'
      export default {
        data () {
          return {
          }
        },
        mounted: function () {  
          // 用$on事件來接收參數
          Bus.$on('val', (data) => {
           //data就是值
          })
        },
      }
    </script>