Vue的父传子与子传父

子传父

要点:通过自定义事件触发父级方法来进行修改父级数据

总结: 1.在父组件中定义修改数据方法 2.在模板中绑定触发自定义事件的事件 3.调用子组件的时候,使用自定义事件绑定父组件方法

知识点:this.$emit("自定义事件名",自定义事件绑定的事件函数的参数)

步骤:

1.在父组件中定义一个修改数据的方法

new Vue({
    el:"#app",
    data:{
        fatherNum:20
    },
    components:{
        child
    },
    // 定义修改数据的方法
    methods:{
        chanFatherNum(val){
            this.fatherNum+=val
        }
    }
})

2.在父组件中,通过自定义事件,绑定事件函数的方式,接收这个函数

<div id='app'>
    <p>父组件中的数字是: {{fatherNum}}</p>
    <!-- 2.在父组件中,通过自定义事件,绑定事件函数的方式,接收这个函数 -->
    <!--!!注意!! @fn !! -->
    <child :num="fatherNum" @fn="chanFatherNum"></child>
</div>  
// 单向数据流(父组件不允许子组件直接修改父组件的数据)
let child={
    template:'#tmpl',
    props:["num"],   //使用props来传递数据 num
    data(){
        return{
            step:20    //写下定义的需要为的数据
    }},

修改到父组件的时候有专门的方式 -- 子传父 this.num这种方式只用于获取数值而无法产生改变

3.在需要修改到父组件数据的地方,触发这个自定义事件(fn一旦触发,chanFatherNum就会执行)

子级用this.$emit调用父级的方法

//在子级中声明方法
    methods:{
        hdClick(){
            this.$emit("fn",this.step)
        }
}}

$emit() 专门用来触发自定义事件

this.$emit("事件名",事件函数的参数)

子组件中

<template id="tmpl">
    <div>
        <p>{{num}}</p>
        <button @click="hdClick">按钮</button>
    </div>
</template>

父传子

1.在父组件内部,声明这个标签属性,用来接收父组件的数据

let child = {
    template:"#tmpl", //指定模板
    props:["num"] // 1. 声明标签属性
}
​
new VUe({
    el:"#app",
    data:{ 
        fatherNum:20 //父组件的数据
    },
    components:{
        child  //注册子组件
    }
})

2在父组件调用子组件的时候,用标签属性 接收 父组件的数据

<div id='app'>
    <child :num="fatherNum"></child>
</div>  

3.在子组件模板中通过标签属性调用数据

// 子组件中准备模板
<template id="tmpl">
    <div>
        <p>{{num}}</p>
    </div>
</template>