父组件通过属性向子组件传值[toc]

<div id="root">
<counter :count="6" @inc="handleIncrease"></counter>
<counter :count="1" @inc="handleIncrease"></counter>
    <div>{{total}}</div>
</div>

子组件通过事件向外传值

<script>
//定义局部组件,父组件通过属性给子组件传值
var counter = {
    props: ['count'], //接收父组件属性count
    //子组件的data一定要是一个函数
    data: function() {
        return {
            number: this.count
        }
    },
    template: '<div @click="handleClick">{{number}}</div>',
    //单向数据流：父组件可以通过属性向子组件传递参数，子组件可以使用该数据
    //但是子组件不可以修改父组件传过来的参数（因为子组件改数据会影响其它子组件）
    methods: {
        handleClick: function() {
            this.number = this.number + 2;
            //子组件通过事件向外传值.向外出发inc(名称自取)事件
            this.$emit('inc',2);  //2表示加了2
        }
    }
}
var vm=new Vue({
    el:"#root",
    components: {
        counter: counter
    },
    data:{
        total: 5
    },
    methods: {
        handleIncrease: function(step) {
            //alert(step);//步长
            this.total += step;
        }
    }
});
</script>

组件的参数校验和非props属性

<div id="root">
    <child content="hello world"></child>
</div>

<script>
//组件的参数校验:父组件通过属性向子组件传递参数，同时子组件也可以对父组件参数做一定的约束
Vue.component('child',{
    props: {
        content: {
            type: String,
            required: false,       //约束可传可不传
            default: 'default value',  //设置属性默认值
            validator: function(value) {
                                //传入的content的内容长度大于5
                return (value.length > 5)
            }
        }
        //content: [ String, Number ],   //约束传递的值为字符串或数字

    },
    template: "<div>{{content}}</div>"
})
var vm=new Vue({
    el:"#root"
</script>

给组件绑定原生事件

<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() {
                alert('click原生点击事件')
            }
        }
    });
</script>