Vue 组件使用简述

1.定义全局组件

使用 Vue.component('组件名称', { })定义全局组件

//html
<div id="app"> 
    <my-com1></my-com1> //使用组件
</div>

//js
Vue.component('myCom1', {
		data: function(){
			return {
				//.....
			}
		}
        template: '<h1>定义全局组件</h1>'
}
var vm = new Vue({
        el: '#app',
        data: {},
        methods:{}
})

上面data代表了组件中私有的数据,template 代表我们需要渲染到页面的节点
注意:上述全局组件定义时使用了驼峰命名,在html中引用时,需要将驼峰的大写变为小写,并在之前添加 -符。

组件说白了就类似一个私有的Vue实例,可以做任何Vue实例的操作,就像下面的图片一样
在这里插入图片描述上面的代码与 Vue 非常类似,但是里面的方法和数据都是私有的,不会与全局冲突。

2.定义私有组件

Vue实例中,可以通过components来定义私有组件,如下

var vm = new Vue({
        el: '#app',
        data: {},
        components: [
            login: {
                template: '<h2>定义私有组件</h2>'
            }
       ]
})

使用方法也与全局组件使用类似,如下

var vm = new Vue({
        el: '#okok',
        data: {},
        components: {
            login: {
                template: '<h2>{{定义私有组件}}</h2>'
            }
        }
})

3.组件中的data

组件中可以定义data并且使用{{ }}引用。
注意:组件中的template只能使用自身组件定义的data

Vue.component('myCom1', {
        template: '<h1>直接{{num}}</h1>',
        data(){
            return {
                num: '123465'
            }
        }
    })

上述组件定义了data,定义方式为一个函数,函数内部返回一个对象。对象中定义自己需要的数据.
这样定义的目的是为了在多次使用同样的组件时,避免这些组件使用同一个对象(数据).
那么使用函数并return一个对象,可以重新开辟一个内存,这样就不会多次使用共享同一个对象了

4.组件传值(父 => 子)

html中使用v-bind以及在子组件中使用props属性可以实现传值(父 => 子)

//html
	<div id="app">
        <my-com1 v-bind:parents = 'msg'></my-com1> // 使用 v-bind定义变量接收父组件中的 msg
	</div>

//js
    Vue.component('myCom1', {
        template: '<h1>{{parents}}</h1>',
        props: ['parents'], //v-bind接收后,使用 props引入才能使用传入的值
        data(){
            return {
                num: '123465'
            }
        }
    })
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '父组件中的值'
        },
        
    })

实现效果如下
在这里插入图片描述
若是要修改组件中msg的值,直接定义点击事件,则可以直接修改父组件中的msg

5.组件传值(子 => 父)

在子组件中传递值给父组件,需要子组件绑定父组件中的事件,并使用$emit调用父组件的方法,然后再使用$emit向方法中传值

//html
    <div id="app">
        <com1 @func1 = "transmit"></com1>  //绑定父组件的事件
    </div>

//js
    var vm = new Vue({
        el: '#app',
        data: { },
        methods: {
            transmit(data = '失败') {
                console.log(`传递${data}`)
            }
        },
        components: {   //子组件
            com1: {
                template: '<input type="button" value="点击传递值给父组件" @click="myclick">', 
                methods: {
                    myclick(){
                        this.$emit('func1','成功') //使用 $emit() 拿到父组件的事件(第一个参数),并传递数据(可以传递多个参数)。
                    },
                }
            }
        }
    })

看看效果吧
在这里插入图片描述

点击此按钮
在这里插入图片描述

6.兄弟组件通信

平级的兄弟组件之间,无法直接进行传值等操作。
需要一个事件中心来充当通信的媒介,来达到传值等操作。

  • 事件中心:指单独的Vue实例(var eventHub = new Vue
  • 监听、销毁事件:eventHub.$on('add', addTodo) || eventHub.$on('add', addTodo)
  • 触发事件:eventHub.$emit('add', id)

创建事件中心后,两组件可以通过在钩子函数中建立监听事件,来达到两组间相互传值的操作。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值