一、如何使用组件?
注意:当我们使用的组件的时候,在下边定义的时候最好(建议。可以都使用小写)使用大驼峰写法,即两个大写字母的方式,而我们在上边把它当作标签使用的时候,直接小写,在第二个大写字母前边写(横杠)-
首先引入vue
然后new Vue创建一个vue的实例对象(如果不创建vue的实例对象,无法使用(创建)组件)
组件分类(全局组件和局部组件,这里简介全局组件)
Vue.component:('',{}) 全局组件
Vue.components: {"": {} } : 局部组件
Vue.component('MyFather', { })
Vue.component创建全局组件(‘自定义组件名’,{
//组件内容
template:类似于el,不过这个可以使用模板字符串来写标签
重点:当我们使用模板字符串构建结构的时候,最外边只能使用一个标签包裹,不能使用两个标签并列,否则会报错
data(){
return { key:value }
//和实例化的vue里的data一样,不过这里的data是一个回掉函数,并且里边的值是return出去的(别的都一样)
}
)
二、组件可以嵌套吗?
组件可以嵌套
组件的关系:父子、兄弟、祖孙
嵌套(写好子组件,放到父组件的template中)
三、(组件)数据父传子
slot(插槽)
正常情况下,组件之间是绝缘的,子组件无法访问到父组件中的数据
所以我们怎么把从数据从父组件传给子组件?
步骤:(你情我愿)
①在父组件中使用子组件时,给子组件传入自定义属性;
②子组件内部声明props来接收属性值。
操作:
传静态值
验证:首先第一步(父传子但是子不会收)在父组件中使用子组件时,给子组件传入自定义属性;
这是父组件传的值 money(自定义属性) 100(值)
这个时候我们发现在子组件下边有一个$attrs
第二步:在子组件内部声明props来接收
props可以认为是一个配置项,它的值是一个数组,用来登记希望从父组件中接收什么数据
然后就变成了这个样子
这时候的子组件就可以使用父组件中的值了
传动态的值
在学习vue的时候,怎么动态绑定属性的值?
v-bind 语法糖直接写冒号:
:money=‘money’(这里的值是在data中拿的)放在这里,然后传过去
如果value写的没有,会报错说没有这个值
思考:
①加v-bind(:)和不加的区别
加了是传递动态的值,不加的话就是一个字符串
②如果传了三个值但是内部只收到一个值,会怎么样
<com1 a="1" b="2" c="3"></com1>
如果子组件内部只有props:[“a"] ,则会如何?
在子组件中就无法收到b,c的值并且, b,c并显示在dom元素的属性,在查看元素时,可见:
b和c不仅是被放弃,他俩作为自定义属性显示在dom元素上
四、(组件)数据子传父
(举例:儿子被打了告诉父亲)
不传参
原理:自定义事件 + $emit
步骤:
①在父组件中:使用子组件时,在子组件上添加自定义事件监听
<子组件
@自定义事件名1="处理事件的函数1"
@自定义事件名2="处理事件的函数2">
</子组件>
处理事件的函数1: 应该定义在父组件中的methods中。
②在子组件中:在某个时刻(根据你程序的要求),通过$emit向父组件发出事件
this.$emit(自定义事件名1)## 子组件抛出事件之后,在父组件中,收到了这个事件,并去调用对应的回调函数
结果:当子组件中发生某事时,会调用父组件中的方法
示例:
1、触发子组件的单击事件,触发hClick回掉函数
2、在回调函数中抛出abc事件
3、子组件抛出事件之后在父组件中,收到了这个事件,并去调用对应的回调函数
4、触发h1回调函数
-----------------------------------------------------------------------------------
行内写法:
-------------------------------------------------------------------------------
原理图:
子组件发生了什么事,通知父组件来处理
传参
this.$emit('事件名', 附加的数据)
obj(形参)会自动接收来自子组件的数据
打印一下obj看看
组件-传递-子传父-传递数据
背景:
在子组件中需要向父组件传值
五、在组件上使用v-model
前面使用v-model时,只是表单元素上使用。
<input v-model="xxxx" />
这里理解,如何在组件上使用v-model
v-model的作用:双向绑定。
在组件上使用的,也是一样希望达到双向绑定的效果:
父组件的数据改变时,能传给子组件;
子组件中的数据变化时,也能回传给父组件
测试
首先在父组件中定义数据项num然后再子组件中直接使用
这样写了之后子组件上的$attrs上会出现一个value
为什么会出现value?
在子组件使用了v-model="num",它自动做两件事:
①给子组件添加了一个名为value的属性。
相当于传一个名为value属性给子组件。
类似于:
<my-com :value="num"></my-com>
第一步:
相当于给子组件传了一个名为的value属性过去(父传子)
这时候要在子组件中使用props来接收这个值
这时候我们就实现了父传子
第二步:
会自动给子组件上一个名为input的事件监听,
在这个事件发生时,将回传的数据直接保存到num中。
<my-com @input="(obj)=>{ this.num = obj }"></my-com>
监听一个input事件(这里是简化写法)(事件发生的时候,子组件把事件抛出,把它存给this.num)会把我们回传的数据,传回给this.num
如何验证呢?
用一个简单的方法(created方法,当new实例被创建时就触发)
所以它就是这样实现子组件改变的时候把值回传给父组件
如果不用v-model就是这样写(第二步)
或者
去页面观看就拿到这个值了
拿到之后再把它存起来
上边的两步真的很麻烦,所以如果使用v-model就不用写这两步了