vue 组件间传值

最新推荐文章于 2024-11-02 08:58:20 发布

Johnny Tong

最新推荐文章于 2024-11-02 08:58:20 发布

阅读量197

点赞数 2

分类专栏： HTML自学历程文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/tongwei117/article/details/137565370

版权

HTML自学历程专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文详细介绍了在Vue应用中，如何通过props进行父组件向子组件的数据传递，以及实现单向数据流的方法。同时讨论了子组件如何修改父组件数据的正确方式，即通过$emit触发自定义事件。

摘要由CSDN通过智能技术生成

背景：
组件之间传值，父组件将数据传递给子组件，子组件通过操作同步修改父组件传递过来的数据

1. 简单传递值和接收值

<script>

    // 创建 vue实例
   const app = Vue.createApp({
    // 数据项
    data() {
        return {
            num: 123456
        }
    },

   // 动态传达参数
    template:  `
     <div> 
        <test v-bind:content="num"/>
     </div>
    `
    });

    app.component('test', {
        //  使用 props 接收传的值
        // props: ['content'],
        // 字符串校验
        // props: {
        //     content: String
        // },
        // type: String Boolen Array Object Function Symbol
        // required 必填
        // default  默认值
        props:{
            content:{
                type: Number,
                required: true,
                // 传的值小于1000校验通过，大于1000会被警告
                validator: function( value) {
                    return value < 1000;
                },
                default: function () {
                    return 789;
                },
            }
        },

        template:  `
     <div> 
        {{content}}
        {{typeof content}}
     </div>
    `
    });

    const vm = app.mount('#root');
    
</script>

2. 单项数据流
单项数据流：可以理解为，父类传递给子类的数据，子类只能使用，不能修改。
子类想要修改，需要在子类中重新定义一个自己的数据进行接收。

<script>

    // 创建 vue实例
   const app = Vue.createApp({
    data() {
        return{
            num:1,
        }
    },
   
    template:  `
     <div> 
        <test :count="num" />
     </div>
    `
    });

    // 自定义组件
    app.component('test', {
        props:["count"],
        data() {
            return {
                number: this.count
            }
        },

        methods: {
            addone() {
                this.number += 1;
            },
        },
        template:  `
     <div @click="addone"> 
        {{number}}
     </div>
    `
    });

    const vm = app.mount('#root');
    
</script>

3. 子类修改父类传递过来的数据
如果子类想修改父类传递过来的数据，需要使用$emit 进行

<script>

    // 创建 vue实例
   const app = Vue.createApp({
    data() {
        return{
            num:1,
        }
    },

    methods: {
        handleAddOne() {
            // alert(123);
            // 
            this.num  += 1;
        },
    },
   
   // 注意：add-one 是子类 方法addOne 监听
    template:  `
     <div> 
        <test :count="num"  @add-one="handleAddOne"/>
     </div>
    `
    });

    // 自定义组件
    app.component('test', {
        props:["count"],
        emits:{
            add: (count) => {
                // 进行数据校验
                if (count > 0) {
                    return true
                } else {
                    return false
                }
            },
        },
        
        methods: {
            addOne() {
               this.$emit('addOne', 3);
            },
        },
        template:  `
     <div @click="addOne"> 
        {{count}}
     </div>
    `
    });

    const vm = app.mount('#root');
    
</script>