• 自定义事件
  • 子组件prop数据同步父组件数据
• 插槽
  • slot

自定义事件

子组件prop数据同步父组件数据

<!-- 父组件 -->
    <template>
        <view>
            <syncA :title.sync="title"></syncA>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    title:"hello vue.js"
                }
            }
        }
    </script>

<!-- 子组件 -->
    <template>
        <view>
            <view @click="changeTitle">{{title}}</view>
        </view>
    </template>
    <script>
        export default {
            props: {
                title: {
                    default: "hello"
                },
            },
            methods:{
                changeTitle(){
                    //触发一个更新事件
                    this.$emit('update:title',"uni-app")
                }
            }
        }
    </script>

插槽

slot

base-layout 子组件模板

<template>
        <view  class="container">
            <header>
                <!-- 我们希望把页头放这里 -->
                <slot name="header"></slot>
            </header>
            <main>
                <!-- 我们希望把主要内容放这里 -->
                <slot></slot>
            </main>
            <footer>
                <!-- 我们希望把页脚放这里 -->
                <slot name="footer"></slot>
            </footer>
        </view>
    </template>

在向具名插槽提供内容的时候，我们可以在一个 template 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：

<template>
        <view>
        <!-- 父组件使用子组件`<base-layout>`，节点上使用slot特性： -->
            <base-layout>
                <template v-slot:header>
                    <view>Here might be a page title</view>
                </template>
                <template v-slot:default>
                    <view>A paragraph for the main content.</view>
                    <view>And another one.</view>
                </template>
                <template v-slot:footer>
                    <view>Here's some contact info</view>
                </template>
            </base-layout>
        </view>
    </template>