vue组件传值

Posted 2021-09-13 史潇倩

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>\'
})