VUE3组件传值方式

发布于：2022-02-23 10:04:07  栏目：技术文档

Vue父子组件之间的通信

父子组件之间不能相互访问data内容

父传子

// 在子组件中声明
// props:['name1', 'name2' ....]， 数组和对象
props: {
    msg:{
        type:String,
        default:'############'
    },
    MyTitle: {
        type:String,
        required:true
    },
    article: {
        type:Array,
        default:['aaaa', 'bbbb', 'cccc'],
    }
},

在父组件中传值

<my-main
        msg="hello"
        :MyTitle="msg"
        :article="article"
>
</my-main>

子传父

子组件

<button @click="changenum(2)">+2</button>
methods: {
    changenum(num) {
        this.$emit('mycountevent', num);
    },
},

父组件

<my-conn @mycountevent="mydemo"></my-conn>
methods: {
    mydemo(data) {
        this.count += data;
    },
},

相关推荐