深入理解vue : 组合式API 组件之间的传值

1.父传子

父组件

    <template>
        <h1>App 组件</h1>
        <myButton :name="name" />
    </template>

    <script setup>
    import myButton from './components/myButton.vue'
    const name = '父组件传递给子组件'
    </script>

子组件

    <template>
        <button>{{ name }}</button>
    </template>

    <script setup>
        import { defineProps } from 'vue'

        defineProps(['name'])
    </script>

子传父

父组件

    <template>
        <h1>App 组件</h1>
        <myButton @getName="getName2" />
    </template>

    <script setup>
    import myButton from './components/myButton.vue'
    function getName2(msg) {
        console.log('子组件传递过来的数据：', msg)
    }
    </script>

子组件

    <template>
        <button @click="getName1">向父组件传递数据</button>
    </template>

    <script setup>
        import { defineEmits } from 'vue'
        const emit = defineEmits(['getName'])

        function getName1() {
            emit('getName','子组件传递的值')
        }

    </script>

祖孙通信

父组件

    <template>
        <h1>祖先级 组件</h1>
        <myButton />
    </template>

    <script setup>
    import myButton from './components/myButton.vue'
    import { provide } from 'vue'
    provide('info', {
        name: '张三',
        age: 18,
        gender: '男'
    })
    </script>

子孙组件

子组件

    <template>
        <h2>我是子组件</h2>
        <children />
    </template>

    <script setup>
       import children from './children.vue'
    </script>

孙子组件

    <template>
        <h3>我是孙子组件</h3>
    </template>

    <script setup>
        import { inject } from 'vue'
        const info1 = inject('info')
        console.log('祖先级组件传递的数据',info1)
    </script>

兄弟传值

定义store

    import { createStore } from "vuex";

    // 创建一个vuex并导出
    export default createStore({
        state: {
            num: 1,
        },

        mutations: {
            add(state) {
                state.num += 1;
            },
        },
    });

在组件中使用

    <template>
        <div>
            <!-- 在template里面使用和一前一样 -->
            我是vuex {{ $store.state.num }}
            <button @click="add">vuex +1</button>
        </div>
    </template>
    <script setup>
    // 引入store
    import { useStore } from "vuex";

    // 老规矩，拿钩子创建一个store
    const store = useStore();

    const add = () => {
        // 调用方式和 vue2 几乎一样，只要注意使用 useStore() 返回的调用就行
        store.commit("add");
    };
    </script>