vue父子之间的传值

父给子传值：

父：

 <v-hello :title="title" :num="num"></v-hello>

子：（通过props进行接收）

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

子给父传值：

父：（@子组件传递过来的=‘父组件的方法’）（当做触发事件来触发，@为v-on的缩写）

<v-hello :title="title" :num="num" @incre="increment" @decre="decrement" @child="parent"></v-hello>


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里面）

<button @click="increments">1</button>
<button @click="decrements">2</button>
<button @click="child">child</button>

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');//可传参
            }
        }
    }