vue组件传值

vue是单项数据流

父传子 --- props

props 可以写作数组或对象形式

Vue.component('ComponentA',{
    // props:['msg'], // props可以写数组也可以写对象
    props:{
        msg:{
            type:String,// 声明参数类型
            default:'title---',// 默认值
            required:true,// 必传参
        },
        name:{
            type: Object,
            validator(val){ // 检验对象的值
                console.log(val,'------')
                return val.a==1
            }
        }
    },
    template:'<div>{{msg}}</div>'
})
var vm = new Vue({
    el:"#app",
    data:{
        msg:'sxq'
    },
    template:'<div>{{msg}}<ComponentA :msg="msg" :name="{a:1}"></ComponentA></div>'
})

子传父 --- $emit

通过 $emit(自定义事件,参数) 方法传参给父组件

Vue.component('ComponentA',{
    template:'<div @click="handleClick">click -- {{count}}</div>',
    data(){
        return {
            count: 0
        }
    },
    methods: {
        handleClick(){
            this.count++
            this.$emit('test',this.count)
        }
    },
})
var vm = new Vue({
    el:"#app",
    data:{
        msg:'sxq'
    },
    template:'<div>{{msg}}<ComponentA @test="handleTest"></ComponentA></div>',
    methods: {
        handleTest(count){
            console.log(count)
            this.msg = count;
        }
    },
})

v-model传值

将 $emit(自定义事件,参数) 中的自定义事件变为 input 事件，即可利用 v-model语法糖 的方法传递参数。

Vue.component('ComponentA',{
    // model:{ // 可以更改默认值
    //     prop:'value_test', // 把默认的接收值 value 改为自定义的值
    //     event:'input_test' // 把默认事件 input 改为自定义的事件
    // },
    props:{
        value:'' // 默认 事件为 input 接收值为 value
    },
    template:'<div @click="handleClick">value -- {{value}}, count -- {{count}}</div>',
    data(){
        return {
            count: 0
        }
    },
    methods: {
        handleClick(){
            this.count = this.$props.value
            this.count++
            this.$emit('input',this.count)
        }
    },
})
var vm = new Vue({
    el:"#app",
    data:{
        msg:0
    },
    template:'<div>{{msg}}<button @click="msg++">FADD</button><ComponentA v-model="msg"></ComponentA></div>'
})

sync修改父组件的值

因为vue是单项数据流，子组件不能直接改变父组件传递的参数，所以需要通过 sync 的方法改变父组件的参数
$emit('update:自定义命名',改后的参数)
:自定义命名.sync="要改的参数"

Vue.component('ComponentA',{
    props:['msg'],
    template:'<div>{{msg}}<button @click="handleClick">click</button></div>',
    data(){
        return {
            count:0
        }
    },
    methods: {
        handleClick(){
            this.count++;
            this.$emit('update:msg',this.msg + this.count)
        }
    },
})
var vm = new Vue({
    el:"#app",
    data:{
        msg:'sxq'
    },
    template:'<div>{{msg}}<ComponentA :msg.sync="msg" :name="{a:1}"></ComponentA></div>'
})