uni-app 的组件的基本使用

╰半橙微兮° 2023-01-03 02:00 77阅读 0赞

## 组件的基本使用 ##

1.  定义组件：在src 下新建一个components文件夹，写组件；
2.  引入组件：使用import 引入组件，@代表src 路径；
3.  注册组件：在对应的实例中注册组件；
4.  使用组件：不写大小驼峰式，也可以写 `<img-border></img-border>`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70]

## 组件的传参 ##

**1，父组件给子组件传参**

在父组件中，给子组件绑定一个数据

子组件中通过props 接受

props: { 
    	datas:Array
    }

**2，子组件给父组件传参和vue一样 使用$emit**

**3，组件之间的全局共享数据**

3.1 通过Vue原型共享数据

// 在main.js中
    Vue.config.productionTip = false
    // 定义全局数据，通过Vue原型来实现
    Vue.prototype.baseURL = 'www.baidu.com'
    
    // 在组件中访问
    this.baseURL

3.2 通过globalData共享数据

在 App.vue 中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70 1]  
在组件中获取数据

getApp().globalData.base    // getApp() 是一个应用实例
    // 也可以赋值
    getApp().globalData.base = '123'

**4，组件插槽(slot)：** 父组件动态的给子组件传递 ‘标签’

右侧是个子组件，其中标题是写死的，内容是不固定的；  
左侧往组件内部写入input标签，但是不能显示，此时应往右侧子组件内添加slot占位符，这样才能显示；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70 2]

**在index.vue中也可以传递参数给 my-form.vue**

index.vue 中传递两个参数：list，index

<my-form :list="[1,2,4]" :index="1">
    </myform>

my-form.vue 中接受这两个参数

props:{ 
    	list: Array,
    	index:String
    }
    mounted(){   // 调试一下看有没有接受到
    	console.log(this.list)
    	console.log(this.index)
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70]: /images/20221119/3683364e890844cdb25f7b8eee9e3086.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70 1]: /images/20221119/e28257996d4e42cfb0db8cbd90664009.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70 2]: /images/20221119/cf6104f7fe084f22b87074c065518f14.png