Day13--自定义组件-封装自定义属性和click事件

提出问题：

 

当前我们search搜索框的背景颜色和圆角边框都是写死的，使用者没有办法修改器背景颜色和圆角尺寸。那么为了让这个组件更加通用性强一些。

**************************************************************************************************************

1.通过自定义属性增强组件的通用性

1》通过 props 定义 bgcolor 和 radius 两个属性，并指定值类型和属性默认值：

我一直在想一个问题，为什么props里面可以放对象直到，我看到以前写的笔记。。。

 我的操作：

2》通过属性绑定的形式，为 .my-search-container 盒子和 .my-search-box 盒子动态绑定 style 属性：

我的操作：

1》在my-search组件中编写代码：

 

通用性的具体体现是：

 

**************************************************************************************************************

2.如何给自定义事件绑定事件 

我的操作：

1》在cate.vue组件中，我想给自定义组件my-search标签绑定一个@click事件。因为它处于cate组件里面，使用自定义组件my-search其实它的内部是不知道@click事件的。

①：

②：

③：

 

2》解决方法

第一种  .native

 

第二种  利用子父之间通信的手段，调用父组件中的方法事件

1>在my-search组件本身它还是知道@click事件，所以先为其绑定一个事件A（searchBoxHandler），然后用该事件A调用$emit触发父组件的事件（gotoSearch）

 

 2>效果图：