vue 组件间传值

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

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>

原文地址：https://blog.csdn.net/tongwei117/article/details/137565370

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！