小白学 VUE 系列子组件父组件之间的传值

父组件传递给子组件

<script src="js/vue.js"></script>
<div id="app">
    <parent></parent>
</div>
<script>
    let Son={
        props:{
            name:{
                type:String,
                required:true
            }
        }
        ,
        template:`<div>
            <h4>{{ name }}</h4>

        </div>`
    }
    let Parent={
        data(){
          return {
              name:"这个是父组件",
              sonName:"父传递过去的子组件标题"
          }
        },
        template:`<div>
            <h3>{{ name }}</h3>
            <son :name="sonName"></son>
        </div>`,
        components:{
            Son
        }
    }
    new Vue({
        el:"#app",
        data(){
            return {

            };
        },
        components:{
            Parent
        },
        methods:{

        }
    })
</script>

子组件传递给父组件，通过 $emit()

vue.$emit(eventName,[...args])

<script src="js/vue.js"></script>
<div id="app">
    <parent></parent>
</div>
<script>
    let Son={
        props:{
            name:{
                type:String,
                required:true
            }
        }
        ,
        template:`<div>
            <h4>{{ name }}</h4>
            <button @click="updateParent">更新父组件</button>

        </div>`,
        methods:{
            updateParent(){
                this.$emit("toParentSet","子更新父标题")
            }
        }
    }
    let Parent={
        data(){
          return {
              name:"这个是父组件",
              sonName:"父传递过去的子组件标题"
          }
        },
        template:`<div>
            <h3>{{ name }}</h3>
            <son :name="sonName" @toParentSet="sonUpdate"></son>
        </div>`,
        components:{
            Son
        },
        methods:{
            sonUpdate(val){
                console.log(222);
                this.name=val;
            }
        }
    }
    new Vue({
        el:"#app",
        data(){
            return {

            };
        },
        components:{
            Parent
        },
        methods:{

        }
    })
</script>

子父组件双向绑定数据解决方案

computed 方案

<script src="js/vue.js"></script>
<div id="app">
    <parent></parent>
</div>
<script>
    let Son={
        props:{
            value:{
                type:String
            }
        }
        ,
        template:`<div><input type="text" v-model="currentVal"></div>`,
        computed:{
            currentVal:{
                get(){
                    return this.value;
                },
                set(val){
                    this.$emit("input",val);
                }
            }
        }
    }
    let Parent={
        data(){
            return {
                name:"父组件"
            }
        },
        template:`<div>
            <h3>{{ name }}</h3>
            <son v-model="name"></son>
        </div>`,
        components:{
            Son
        },
        methods:{
            sonUpdate(val){
                console.log(222);
                this.name=val;
            }
        }
    }
    new Vue({
        el:"#app",
        data(){
            return {

            };
        },
        components:{
            Parent
        },
        methods:{

        }
    })
</script>

model解决

<script src="js/vue.js"></script>
<div id="app">
    <parent></parent>
</div>
<script>
    let Son={
        props:{
            value:{
                type:String
            }
        }
        ,
        model:{
          prop:"value",
          event:"change"
        },
        template:`<div><input type="text" @input="update"></div>`,
       methods:{
            update(e){
                this.$emit("change",e.target.value);
            }
       }
    }
    let Parent={
        data(){
            return {
                name:"父组件"
            }
        },
        template:`<div>
            <h3>{{ name }}</h3>
            <son v-model="name"></son>
        </div>`,
        components:{
            Son
        },
        methods:{
            sonUpdate(val){
                console.log(222);
                this.name=val;
            }
        }
    }
    new Vue({
        el:"#app",
        data(){
            return {

            };
        },
        components:{
            Parent
        },
        methods:{

        }
    })
</script>

父组件调用子组件的方法

在实际开发中经常会遇到父组件调用子组件的方法，其实很简单，通过ref就可以直接调用子组件里面的方法。

<script src="js/vue.js"></script>
<div id="app">
    <parent></parent>
</div>
<script>
    let Son={
        data(){
            return {
                name:"子组件"
            }
        },
        template:`<div>{{ name }}</div>`,
       methods:{
            update(){
               console.log("子组件方法");
               this.name="子组件方法";
            }
       }
    }
    let Parent={
        data(){
            return {
                name:"父组件"
            }
        },
        template:`<div>
            <h3>{{ name }}</h3>
            <son ref="children"></son>
            <button @click="toSonMethod">调用子方法</button>
        </div>`,
        components:{
            Son
        },
        methods:{
            toSonMethod(val){
              this.$refs['children'].update();
            }
        }
    }
    new Vue({
        el:"#app",
        data(){
            return {

            };
        },
        components:{
            Parent
        },
        methods:{

        }
    })
</script>