vue 父子组件

Posted 2020-12-26 jassin-du

父子组件建立通信

我们可以为子组件的 props 指定验证规则。如果传入的数据不符合要求，Vue 会发出警告。这对于开发给他人使用的组件非常有用。

我们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求，Vue 会发出警告。这对于开发给他人使用的组件非常有用。

父往子传递信息流程

流程：
1：在父组件先写上子组件的标签
例如，子组件：Appheader.vue
<Appheader num="10"></Appheader>
2:在子组件需要写验证方法 ----> props
   props:["num"],
3.在父组件显式
<Appheader num="10"></Appheader>

子往父组件传递信息流程

注意：需要自定义事件，使用this.$emit()触发这个自定义事件

父组件：

APP.vue(父)在注册子组件Counter时自定义两个事件(incre和decre),并在增加increment和decrement的方法，说道底就是，父方法创建方法让子组件调用改变
<template>
    <div>
        <Counter v-bind:num="num" v-on:incre="increment" v-on:decre="decrement"></Counter>
        <p>父:{{num}}</p>
    </div>
</template>

<script>
    import Counter from ‘./components/first‘
    export default {
        data(){
            return {
                //给父默认为10
                num:10
            }
        },
        components: {
            Counter
        },
        methods:{
            increment(){
                this.num++;
            },
            decrement(){
                this.num--;
            }
        }
    }

</script>

子组件：

//子组件使用$emit调用父组件(注意是事件名)
<template>
    <div>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <p><span>{{num}}</span></p>
    </div>
</template>

<script>
    export default {
        props: ["num"],
        data () {
            return {
                num: 0
            }
        },
        methods: {
            increment(){
                this.$emit(‘incre‘);
            },
            decrement(){
                this.$emit(‘decre‘);
            }
        }
    }
</script>