Vue中父子组件传值

1、父组件通过属性向子组件传递数据：

  1.1Prop   

    子组件通过props接收父组件的传值： props:['prop1','prop2','prop3',……]

<div id="root">
    <counter count="hello world"></counter>  
</div>
<script>
    Vue.component('counter',{       
        props:["count"],
        template: '<div>{{count}}</div>',       
    })
    var vm=new Vue({
        el: "#root"       
    })   
</script>

 

prop类型     

通常需要每个prop都有指定的值类型，这时可以使用对象形式列出这些prop，

props: {
    prop1:String,
    prop2: Number,
    prop3: Array,
    prop4: Object,
    prop5: Boolean
}

 prop也可以通过v-bind动态赋值

<div id="root">
    <counter :count="msg"></counter>  
</div>
<script>
    Vue.component('counter',{       
        props:["count"],
        template: '<div>{{count}}</div>',       
    })
    var vm=new Vue({
        el: "#root",
        data:{
            msg: "hello world"
        }       
    })   
</script>

 当prop静态赋值时，引号的内容会被当做字符串。当动态赋值时，引号的内容会被当做js代码解析

1,2 单向数据流

单向数据流：父组件可以随意的向子组件传递参数，但子组件不能修改父组件传递的内容 .

如果子组件要改变父组件传入的数据可以使用如下方法：

将父组件传递给子组件的count赋值给子组件data的number，然后对number进行操作。

<div id="root">
    <counter :count="msg"></counter>
    <counter :count="msg"></counter>
</div>
<script>
    Vue.component('counter',{
        props:["count"],//接收父组件传递的数据count
        data: function () {
            return {
               text: this.count//拷贝一个副本，对副本进行操作
            }
        },
        template: '<div @click="handleClick">{{text}}</div>',
        methods:{
            handleClick:function () {
                this.text="text变为其他值，但count的值不变";                
            }
        }
    })
    var vm=new Vue({
        el: "#root",
        data:{
           msg: '这是父组件传递给子组件的值count，将其赋值给text'
        }
    })
</script>

结果：

 

 1.3Prop验证

props:{
    content:{
        type: String,  //出入的数据类型
        required: true, //是否必须传入数据
        default:"default value",//如果没有传入数据，则显示默认值 
        validator:function(value){//自定义验证函数，value代表传入的值
            return (value.length>5)
            }
    }
}

 2、子组件通过事件向父组件发送消息

2.1子组件调用$emit方法向父组件触发一个事件

语法为 $emit("eventhandle",value)

第一个参数为事件类型，第二个参数（可选）为向父组件传递的值

<div id="root">
    <counter :count="0" @change="handleChange"></counter><--!在父组件中监听子组件传递的change事件，如果监听到则触发handleChange函数>
    <counter :count="0" @change="handleChange"></counter>
    <div >{{total}}</div>
</div>
<script>
    Vue.component('counter',{
        props:["count"],
        data: function () {
            return {
               number: this.count
            }
        },
        template: '<div @click="handleClick">{{number}}</div>',
        methods:{
            handleClick:function () {
                this.number=this.number+5;
                this.$emit("change",5)//向父组件传递事件change和参数 5
            }
        }
    })
    var vm=new Vue({
        el: "#root",
        data:{
           total:0
        },
        methods: {
            handleChange: function(step){
                console.log(step)//step的值是$emit的第二个参数
                this.total=this.total+step
            }
        }
    })
</script>

结果：

2.2给组件绑定原生事件：

通过之前的学习可以知道，给子组件绑定事件时应将事件绑定在template的元素中，如上例，而在<counter>元素中绑定的事件时自定义事件，需要监听子组件通过$emit传递的事件来触发。否则事件不会触发。

如下例，点击Child并不会触发点击事件。

<div id="root">
    <child @click="handleClick"></child>
</div>
<script>
    Vue.component('child',{
        template: '<div>Child</div>'
        }
    )
    var vm=new Vue({
        el:"#root",
        methods:{
            handleClick: function () {
                console.log(clicked)
            }
        }
    })
</script>

结果：

  如何给组件绑定原生事件呢，可以使用v-on的native修饰符，如下例

<div id="root">
    <child @click.native="handleClick"></child>
</div>
<script>
    Vue.component('child',{
        template: '<div>Child</div>'
        }
    )
    var vm=new Vue({
        el:"#root",
        methods:{
            handleClick: function () {
                console.log(clicked)
            }
        }
    })
</script>

结果：