Vue 组件props(组件传参实现父子组件传递数据)的基本使用

子组件

<template>
    <div>
        <ul>
            <li>姓名: {{name}}</li>
            <li>年龄: {{age}}</li>
        </ul>
        <button @click="func("data")">点击触发传入的function</button>
    </div>
</template>

<script>
    export default {
        name: "PropsDemo",
        props: {
            name: {
                // 限制类型
                type: String,
                // 必传
                required: true
            },
            age: {
                // 限制类型
                type: Number,
                //默认值
                default: 0
            },
            func: {
                // 限制类型
                type: Function
            }
        }
    }
</script>

父组件

<template>
    <div id="app">
        <PropsDemo name="abcd" :func="getData"></PropsDemo>
    </div>
</template>

<script>
    import PropsDemo from "@/components/RefAndPropsDemo/PropsDemo";

    export default {
        name: 'App',
        components: {PropsDemo},
        methods: {
            getData(val){
                console.log(val)
            }
        }

    }
</script>

注
*父to子：props传数据，可用来父组件给子组件传递数据
*子to父：props传function，可用来子组件给父组件传递数据