阅读 543

props传递数据

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

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

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

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

component:{
    'my-name' :{
        props:['msg'], // 来接收父亲传递数据
        template:'<div>{{msg}}</div>' // msg 渲染父亲 传递的数据
    }
}
复制代码
  1. props来自父级,而组件中 data return 的数据就是自己的数据

  2. props的值有两种,一种是字符串,一种是对象

  3. 两种情况作用于,就是组件本身,可以在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'
            }
        }
    }
})
复制代码

数据验证

在vue组件中 cameCased(驼峰式)命名与keyup-case 短横线命名

html: myMessage 与 mymessage 是一致的,因为在组件中的html 必须使用 keyup-case 短横线命名,不允许使用驼峰命名

组件中: 父子组件传递数据必须使用短横线命名,在template中,必须使用驼峰命名,否则会直接报错.

在组件的data中,用this.xxx引用时,只能是驼峰命名方式,若为短横线则会报错

文章分类
前端
文章标签