props原理

我们常常使用props来实现父组件对子组件的传值

<div id="app" v-cloak>
    <com1 :sending="msg"></com1>
</div>
<script>
    var com1={
    template:"<h1>组件传值--{{msg}}</h1>",
    props:["sending"]
}

    var vm = new Vue({
    el:"#app",
    data:{
        msg:"this is your app"
},
    conponents:{com1}
})
<script/>

 我们首先要了解一下with(){}

使用方式：with(表达式){块作用域}

作用：可以形成一个块作用域，在此块作用域中可以任意使用对象（传入表达式）的属性和方法。

优点：在with(){}中，可以很方便直接使用属性名或方法，而不是用对象.属性的方式调用；并形成块作用域

父组件传递数给子组件前底层会执行

(function(){
    with(this){
    //通过this，将父组件的作用域在该大括号内使用
    return _c("div",{staticClass:"app"},[_c("com1",{attrs:{"sending":msg}})],1)
    //_c是渲染组件的函数，_c('com1')表示渲染com1组件
}
})

所以我们需要的在父组件中的数据其作用域会被绑定给子组件，其实是将数据给了props的实例_props, _props 会将自身的数据全部复制给子组件的vm，这样子组件就可以使用父组件的数据，也就实现了父组件对子组件的传值