vue组件的创建及使用

一、全局组件

第一种方式

  // 1、定义全局组件，模板对象
var com = Vue.extend({
          // template里写入html结构
          template: '<h3>这是全局组件</h3>'
})
  //2、使用模板对象，第一个参数为组件名称，第二个为模板对象
 Vue.component('myCom', com)

标签中使用，

 <!--不能有大写，有大写的中间用-连接，如<myComl>改为<my-coml>-->
<my-com></my-com>

第二种方式

  Vue.component('myCom2', {
     template: '<h3>这是全局组件的第二种方法</h3>'           
 })

<my-com2></my-com2>

第三种方式

Vue.component('myCom3', {
     template: '#temp'
})

html结构写在这里

<template id="temp">
  <div>
    <h3>你好呀，第三种方式</h3>
  </div>
</template>

注:template标签下面的代码只能有唯一的根元素，因此定义了一个div,所以结构写在div中

二、私有组件

components: { //定义私有组件,lagin组件名称
        lagin: {
             template: '<h1>saaf</h1>'
        }
 }

或者

components: { //定义私有组件,lagin组件名称
                lagin: {
                    template: '#temp'
                }
 }

<template id="temp">
  <div>
    <h3>你好呀</h3>
  </div>
</template>

三、组件中的data和methods

 Vue.component('com', {
            template: '<h3>这是一个全局组件{{msg}}</h3>',
            //组件中的data必须是一个方法，且必须返回一个对象
            //组件中data数据使用方式与实例中的完全一样,只不过要写在template中。
            // data,必须return 一个对象，且是自己定义的数据,如果使用外部定义的数据,则在同一界面使用相同组件时，指向的数据内存会是同一个
            data: function() {
                return {
                    msg: 'shfiushfiu'
                }
            },
            methods: {

            }
 })

四、组件之间的切换

定义两个组件

Vue.component('denglu', {
            template: '<h1>登录组件</h1>'
})
Vue.component('zhuce', {
            template: '<h1>注册组件</h1>'
})

切换标签

 <!-- component是一个占位符 ：is是属性，里面写组件的名称，组件名称用''圈起来  或者写入变量-->
 <component :is="com"></component>

开始切换

 <!-- 通过点击标签更改变量com的值，来切换组件 -->
<a href="" @click.prevent="com='denglu'">登录</a>
<a href="" @click.prevent="com='zhuce'">注册</a>

五、组件之间传值

父组件向子组件传值

 var vm = new Vue({
            el: "#app",
            data: {
                msg: '父级作用域的数据'
            },
            methods: {
                show() {
                    console.log("这是父级元素的方法")
                }
            },
            components: {
                com: {
                    template: '<h1>这是子组件--{{str}}</h1>',
                    // props定义的是需要引用父级作用域中的数据的名称
                    props: ['str']
                },
                com2: {
                    template: '<div><input type="button" value="点击" @click="myclick"></input></div>',
                    methods: {
                        // 定义子组件方法myclick
                        myclick() {
                            // 利用$emit接受传递过来的fun，emit意为触发，this代表com2组件
                            this.$emit('fun')
                        }
                    }
                }
            }
        })

<div id="app">
        <!-- 使用v-bind绑定子组件自己定义的数据的名称，然后传入data里面的数据，即可在子组件中使用 -->
        <com v-bind:str="msg"></com>

        <!-- 向子组件传递show方法 -->
        <com2 @fun="show"></com2>
</div>

子组件向父组件传值

var com2 = {
            template: '#temp1',
            methods: {
                myclick(data) {
                    var number = 15;
                    //调用父组件传递过来的方法,并通过第二个参数，向父级作用于里面的方法传递参数
                    this.$emit('func', number);
                }
            },
        }
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                show(data) { //data用来接收从子组件传递过来的参数
                    console.log("调用了父级作用域的方法 ---" + data)
                }
            },
            components: {
                com2
            }
  })

<div id="app">
        <!-- 利用事件绑定机制，想子组件传递一个show方法 -->
        <com2 v-on:func="show"></com2>
    </div>
    <template id="temp1">
        <div>
            <h1>这是子组件</h1>
            <input type="button" value="点击触发func方法" v-on:click="myclick">
       </div>
</template>