新建页面，添加配置

在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'})

    }
  }

。