开发笔记 第2页

来源： 推荐 | 10个好用的Web日志安全分析工具 – Bypass – 博客园

来源： vue中子组件的methods中获取到props中的值方法（vue 学习笔记）_vue 获取props的值-CSDN博客

来源： The data property “xxx“ is already declared as a prop. Use prop default value instead.-CSDN博客

在写父组件子组件相互传递数据的时候，出现The data property “num” is already declared as a prop. Use prop default value instead.

这里意思是这个data的属性num已经在prop声明了，使用prop默认的值替代。因为num我在父组件已经创建声明后面又在子组件的data声明和初始化，造成冲突。

 

所以报这个错，然后需要把子组件的那个data函数里的num删除或者换个不重复的名字，便可以解决报错。
————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/caseywei/article/details/108062924

来源： uni-app父子组件间的方法调用及传值_uniapp调用组件内部的方法-CSDN博客

uni-app父子组件间的方法调用及传值

方法调用：

一、父组件调用子组件里的方法

1. 先准备一个子组件

<template>

<view></view>

</template>

 

<script>

export default {

data(){

return {}

},

methods:{

childMethod() {  // 子组件中有一个childMethod方法

console.log(‘childMethod do…’)

}

}

}

</script>

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

2. 准备一个父组件

<template>

<view class=”content”>

<mian-index ref=”mainindex”></mian-index> //使用子组件，ref给子组件一个id标识

</view>

</template>

<script>

import mainindex from ‘@/pages/main/index/index.vue’  //引入子组件

export default {

data() {

return {

 

};

},

components:{

‘mian-index’:mainindex

},

onLoad(e) {

this.$refs.mainindex.childMethod();  //页面加载时就调用子组件里的childMethod方法

}

}

</script>

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

参考地址：https://www.cnblogs.com/cap-rq/p/11026881.html

 

二、子组件调用父组件里的方法

2.1. 准备一个父组件

<template>

<view class=”father”>

<child v-on:ToChange=”change”></child>  // 在使用子组件时，通过v-on绑定在父组件内定义好的方法

</view>

</template>

 

<script>

import child from ‘../../components/child’  //引入子组件

export default {

…

methods: {

change(){  // 在父组件内定义好的方法

console.log(“触发了父页面内的方法”);

},

},

components:{

child

}

}

</script>

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

2.2. 在准备一个子组件

<template>

<view @tap=”changeC()”>  // 在子组件内绑定触发子组件内定义的方法

子组件

</view>

</template>

 

<script>

export default {

…

methods:{

changeC(type){

this.$emit(“Tochange”);  // 通过this.$emit触发父组件内绑定的方法

console.log(“触发了子组件内的方法”);

}

}

}

</script>

 

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

参考地址：https://blog.csdn.net/Sport_18/article/details/102833209

 

传值：

 

三、父组件给子组件传值

3.1. 父组件：

<template>

<view>

<test :msg=”msg”></test>  // :msg=”msg”绑定传值

</view>

</template>

 

<script>

import test from “@/components/test/test.vue”  // 引入子组件

export default {

data () {

return {

msg: ‘hello’

}

},

components: {test}

}

</script>

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

3.2. 子组件：

<template>

<view>

子组件 {{msg}}  //接收后使用

</view>

</template>

 

<script>

export default {

props: [‘msg’]  //通过props接收数据

}

</script>

 

<style>

</style>

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

四、子组件给父组件传值

4.1. 父组件

<template>

<view>

<test @myEvent=”getMsg”></test>

</view>

</template>

<script>

import test from “@/components/test/test.vue”   // 引入子组件

export default {

methods: {

getMsg (res) {

console.log(res)

}

},

components: {test}

}

</script>

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

4.2.子组件

<template>

<view>

<button type=”primary” @click=”sendMsg”>给父组件传值</button>

</view>

</template>

 

<script>

export default {

data () {

return {

status: ‘hello uni-app’

}

},

methods: {

sendMsg () {

this.$emit(‘myEvent’,this.status)  // 通过$emit触发事件，第二个参数就是传递的参数

}

}

}

</script>

————————————————

 

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

 

原文链接：https://blog.csdn.net/weixin_40816738/article/details/124774664

来源： uni-app 页面顶部栏固定悬浮的 css 兼容方法 – DCloud问答

uni-app 中 NavigationBar（导航栏 44px）以及 TabBar（底部选项卡 50px）组件的高度是固定的，不可修改，各小程序平台，包括同小程序平台的 iOS 和 Android 的高度也不一样。

那么如果我们需要悬浮导航菜单则需要使用 position: sticky 来使其悬浮，然后对于 H5 平台加上 top:44px 的高度，这样 uni-app 页面顶部导航栏的固定悬浮就实现了兼容，具体的代码如下：

复制代码.menu {  
    position: sticky;  
    /* #ifdef H5 */  
    top: 44px;  
    /* #endif */  
    /* #ifndef H5 */  
    top: 0;  
    /* #endif */  
    z-index: 999;  
    flex: 1;  
    flex-direction: column;  
    overflow: hidden;  
    background-color: #ffffff;  
}

以上代码纯属子凡开发中简单的需要稍微注意的地方，仅供大家学习参考。

其中 position: fixed 虽然也可以悬浮固定，但是底部的元素就无法继承 top 的值了，可以简单说 fixed 是特殊版的 absolute，fixed 元素总是相对于 body 定位的。所以就需要使用 position: static，static(没有定位)是 position 的默认值，元素处于正常的文档流中，会忽略 left、top、right、bottom 和 z-index 属性。

除非注明，否则均为泪雪博客原创文章，禁止任何形式转载

本文链接：https://zhangzifan.com/uni-app-navigationbar-position-static.html

来源： uniapp 添加顶部搜索导航_typeerror: uni.onnavigationbarsearchinputclicked i-CSDN博客

来源： ​easycom组件冲突的解决办法-CSDN博客

在uni项目中遇到easycom组件冲突的问题，在网上查的资料让删掉components下的同名目录，按照方法操作后发现项目报错，于是按照提示删掉了uni_modules下的同名目录，删除完之后就能正常运行啦

 

来源： uni.switchTab()跳转不刷新页面问题_currentpage.onload is not a function-CSDN博客

uni.switchTab()跳转不刷新页面问题

大家应该都遇到过,调转到 tabBar 里面的页面时，只能使用 uni.switchTab() 或者是 uni.navigator() 跳转，
使用 uni.reLauch() 或者是 uni.redirect() 无效，但是她们都存在一个共同的问题，就是，无法刷新页面和数据，uni.switchTab() 后面也是不可以带参数的，带参数无效，接下来就告诉大家我试了很多方法得出的结论。

我是需要从修改个人中心跳转到个人中心界面，

相信大家很多人百度这个问题，解决方案都是点击按钮时

但是页面会报错 page.onLoad is not a function 并且不会请求接口，所以页面无法刷新

 

还有人会使用 this.$forceUpdate()； 但是页面并不会刷新，在vue脚手架中确实可以刷新页面，但是uniapp中没有效果
最后的解决方案，就是在跳转的时候，调用
window.location.reload();

 

这样可以在跳转的同时刷新页面，改代码必须写在要跳转的点击事件里面，放在mounted或者是onLoad里面，会一直刷新页面，出现死循环。
————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/qq_43665443/article/details/114398927

来源： uniapp数据存储在本地，获取和移除。_uniapp存储数据到本地-CSDN博客

来源： uniapp底部弹出层(uni-popup)使用技巧_uniapp从底部弹出一个盒子-CSDN博客