前端-Vue基础3（父子组件交互）

1、子组件往父组件传值

点击子组件的值，子组件自增，父组件的值也跟着自增

通过：this.$emit('change')方法向父组件暴露事件，在子组件中引用，可以调用父组件的方法

点击子组件触发click事件，调用子组件的add方法

子组件的add方法触发了父组件的事件，调用了父组件的changeAdd方法

<body>
<div id="app">
<!--    调用父组件的方法-->
    <number @change="countAdd"></number>
    <number @change="countAdd"></number>
    <div>父组件--<span>{{count}}</span></div>

</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('number',{
        template:'<div>子组件--<span @click="add">{{num}}</span></div>',
        data:function () {
            return{
                num:0
            }
        },
        methods:{
            add:function () {
                this.num++
                this.$emit('change'.this.num)//向父组件触发事件
            }
        }
    })

    new Vue({
        el:'#app',
        data:{
            count:0
        },
        methods:{
            countAdd:function (num) {
                this.count++
                console.log(num)
            }
        }
    })
</script>
</body>

2、父组件向子组件单向传值

父组件向子组件传值，存在单向数据流

父组件可以随意向子组件传值，但是子组件不能随意修改父组件的值，因为子组件修改了父组件的值，其他同级的子组件的值也会跟着改变

<body>
<div id="app">
<!--    调用父组件的方法-->
    <number :num2="number2" num3="10"></number>
    <number :num2="number2" num3="10"></number>

</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('number',{
        //父组件向子组件传值，存在单向数据流
        //父组件向子组件可以随意传值
        //但是子组件不能随意修改父组件的值，因为子组件修改了父组件的值，其他同级的子组件的值也会跟着改变
        props:['num2','num3'],
        template:'<div>子组件--<span @click="change">{{count}}</span></div>',
        data:function () {
            return{
                count:this.num2
            }
        },
        methods:{
            change:function () {
                this.count = 100
            }
        }
    })

    new Vue({
        el:'#app',
        data:{
            number2:99
        }
    })
</script>
</body>

2.1 props

props可以是数组

Vue.component('number',{
        //父组件向子组件传值，存在单向数据流
        //父组件向子组件可以随意传值
        //但是子组件不能随意修改父组件的值，因为子组件修改了父组件的值，其他同级的子组件的值也会跟着改变
        props:[num2,num3],
        template:'<div>子组件--<span @click="change">{{count}}</span></div>',
        data:function () {
            return{
                count:this.num2
            }
        },
        methods:{
            change:function () {
                this.count = 100
            }
        }
    })

也可以是字典

Vue.component('number',{
        //父组件向子组件传值，存在单向数据流
        //父组件向子组件可以随意传值
        //但是子组件不能随意修改父组件的值，因为子组件修改了父组件的值，其他同级的子组件的值也会跟着改变
        props:{
            'num2':{
                type:[Number,String],//数据类型
                default:200,//默认值
                required:true//不能和default连用
            }
        },
        template:'<div>子组件--<span @click="change">{{count}}</span></div>',
        data:function () {
            return{
                count:this.num2
            }
        },
        methods:{
            change:function () {
                this.count = 100
            }
        }
    })

 

posted @ 2020-07-20 20:05  cjxxl1213  阅读(519)  评论(0)  编辑  收藏  举报