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>

vue组件命名和传值

相关推荐