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组件命名和传值

最新文章

热门文章