小程序开发之路uni-app 06

「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」

使用vue3+vite开发uniApp

自定义事件

不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。即区分大小写，驼峰命名不能使用kebab-case方式。

组件、prop是html解释执行，事件是javascript中解释执行。

可以通过 emits 选项在组件上定义已发出的事件。

• 在子组件中自定义事件，子组件触发事件调用父组件的方法。

    // 在组件内
    export default {
        emits: ['in-focus', 'submit']
    }

子组件

  <template>
        <view>
            <!-- 我是counter组件 -->
            <view>counter的值是：{{count}}</view>
            <button type="default" @click="add">+1</button>
        </view>
    </template>
    <script>
        export default {
            //1.声明自定义事件：组件的自定义事件，必须事先声明在emits节点中
            emits:['count-change'],
            data() {
                return {
                    count:0
                };
            },
            methods:{
                add(){
                    this.count++
                    //2.触发自定义事件：当点击+1按钮时，调用this.$emit()方法，触发自定义count-change事件
                    this.$emit('count-change')
                }
            }
        }
    </script>
    

父组件

<template>
        <view>
            <!-- 我是父组件 -->
            <!-- 3、监听自定义事件：通过v-on的形式监听自定义事件 -->
            <counter @count-change="getCount"></counter>
        </view>
    </template>
    <script>
        export default {
            methods: {
                getCount(){
                    console.log("触发了count-change的自定义事件")
                }
            }
        }
    </script>

v-model 参数

默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。可以通过向 v-model 传递参数来修改这些名称：

    <my-component v-model:foo="bar"></my-component>

在本例中，子组件将需要一个 foo prop 并发出 update:foo 要同步的事件：

    <template>
        <view>
            <input type="text" :value="foo" @input="$emit('update:foo', $event.target.value)" >
        </view>
    </template>
    <script>
        export default {
            props: {
              foo: String
            }
        }
    </script>
    <my-component v-model:foo="bar"></my-component>

多个 v-model 绑定

通过利用以特定 prop 和事件为目标的能力，我们现在可以在单个组件实例上创建多个 v-model 绑定。

    <template>
        <view>
            <!-- 父组件 -->
            <user-name
              v-model:first-name="firstName"
              v-model:last-name="lastName"
            ></user-name>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    firstName:"",
                    lastName:""
                }
            }
        }
    </script>

子组件

    <!-- user-name子组件 -->
    <template>
        <view>
            <input type="text" :value="firstName" @input="$emit('update:firstName', $event.target.value)">
            <input type="text" :value="lastName" @input="$emit('update:lastName', $event.target.value)">
        </view>
    </template>
    <script>
        export default {
            props: {
                firstName: String,
                lastName: String
            }
        }
    </script>

v-model作用：根据子组件属性名称进行传参，即子组件props的属性名称。可以绑定属性的更新事件。