新建页面，添加配置
在pages.json里添加页面地址，注意，不需要.vue后缀
image.png
如果微信开发工具报错uniapp could not find the corresponding WXML fileflex，重启一下编译工具
引入组件
当前目录下的文件夹的组件要加 ./
image.png
父子组件通信
父组件引用子组件
父：
// 破折号连接
<popup-input></popup-input>
// popupInput 驼峰法
import popupInput from '../../components/popup-input'
export default {
components: {
popupInput
},
父组件向子组件传属性
父组件传属性
:title传变量，动态改变值。：即v-bind。不加:就是固定值。
<popup-input ref="popupInputBox" :title=title description="描述"> </popup-input>
子组件接属性
<view>{{ title }}</view>
<view>{{ description }}</view>
export default {
props: {
// 正标题
title: {
type: String,
default: ''
},
// 描述
description: {
type: String,
default: ''
}
},
注意： 数组对象的默认值必须是箭头函数
image.png
父组件触发子组件函数
子组件：
$emit('方法名', 参数)
/* 确认函数 */
confirm () {
if (this.inputValue.trim() !== '') {
// 把输入框的值传给父组件
this.$emit('confirm', this.inputValue.trim())
}
}
父组件：
用ref定义个名字popupInputBox，在调用子组件的方法。
-
@confirm是触发子组件的confirm方法 -
onConfirm是执行自己的onConfirm方法 -
this.$refs.popupInputBox.show是调用子组件的show方法
<popup-input ref="popupInputBox" @confirm="onConfirm">
</popup-input>
/* 确认按钮提交函数 */
// inputValue：输入框的值
onConfirm (inputValue) {
console.log('执行确认操作' + inputValue)
// 调用子组件关闭输入框
this.$refs.popupInputBox.show(false)
}
页面跳转
从 index.vue 跳转到同级页面 timing：
- 小程序中用<navigator>
- 注意不需要写'/timing'
<navigator hover-class="none" v-else :url="'timing?userBookId=' + book.id">
<view class="operation reading">开始阅读</view>
</navigator>
接收 参数，直接以 “options.参数名”的形式获取
onLoad: function (options) {
var str = options.userBookId;
- vuejs中用<router-link>
<router-link to='/goods/title'>显示商品标题</router-link>
<button @click="jump">Button-跳转到购物车页面</button>
methods: {
jump(){
//this.$router.push("/cart")
//传递的参数用{{ $route.query.goodsId }}获取
this.$router.push({path: '/cart?goodsId=12'})
}
}
。
