vue父子之间的传值

父给子传值:

父:

 

子:(通过props进行接收)

export default {
        name: "hello",
        props:['title','num'],
        data(){
            return {
                suba:'子组件1',
                subb:'父组件2',
                subtitle:this.title,
            }
        },
       
    }

子给父传值:

父:(@子组件传递过来的=‘父组件的方法’)(当做触发事件来触发,@为v-on的缩写)




export default {
    components: {
        'v-hello':hello
    },
    name: 'app',
    data() {
        return {
            title:'父',
            num:'1'
        }
    },
    methods:{
        increment(){
            this.num++
        },
        decrement(){
            this.num--
        },
        parent(close){
            this.title=close
        }
    }
}

子:(通过$emit)(也可以放到mounted里面)





export default {
        name: "hello",
        props:['title','num'],
        data(){
            return {
                suba:'子组件1',
                subb:'父组件2',
                subtitle:this.title,
            }
        },
        methods:{
            increments(){
                this.$emit('incre')
            },
            decrements(){
                this.$emit('decre')
            },
            child(){
                this.$emit('child','1');//可传参
            }
        }
    }

 

你可能感兴趣的:(vue父子之间的传值)