props传递数据-一一网

使用props 传递数据，父亲向儿子传递数据

在组件中使用props来从父亲组件接收参数

注意： 在props中定义的属性，都可以在组件中使用

<div >
    <my-name msg="父亲传递的数据"></my-name>
</div>

component:{
    'my-name' :{
        props:['msg'], // 来接收父亲传递数据
        template:'<div>{{msg}}</div>' // msg 渲染父亲 传递的数据
    }
}
复制代码

props来自父级，而组件中 data return 的数据就是自己的数据
props的值有两种，一种是字符串，一种是对象
两种情况作用于，就是组件本身，可以在template、computed、methods中直接使用

使用v-bind 进行数据的动态绑定

 <input type="text" v-model="propsmsg"> 
    <my-name :propsmsg="propsmsg"></my-name>

   {{propsmsg}}

Vue.component('my-name',{
    props:['msg','propsmsg'],
    template:'<div>{{propsmsg}}</div>'
 })
复制代码

单向数据流

解释： 通过 props 传递数据是单向的了，也就是父组件数据变化时会传递给子组件，反过来不行

目的： 尽可能将父组件解稿，避免子组件无意中修改了父组件的状态

应用场景： 业务中会经常遇到两种需要改props的情况

注册组件

Vue.component('my-name',{
        props:['propsmsg'],
        template:'<div>儿子{{propsmsg}}</div>',
        data(){
            return {
                count: this.propsmsg
            }
        }
    })
复制代码

<my-name msg="父组件的内容"></my-name>
复制代码

1.一种是父组件传递初始值进来，子组件作为初始值保存起来，在自己的作用域可以随便修改，这种情况在组件data内生变一个数据，引入父组件的props
2. 另一种是props 作为需要被转变的原始值传入，这种情况用计算属性就可以了

<input type="text" v-model="width">
<my-component :width="width"></my-component>

new Vue({
    data:{width:0}
})
Vue.component('my-component',{
    props:['width'],
    template:`<div :style='style'></div>`,
    computed:{
        style(){
            return {
                width: this.width + 'px',
                background: 'red',
                height: '20px'
            }
        }
    }
})
复制代码