1.10-1.11笔记

最新推荐文章于 2024-10-09 00:58:21 发布

九今

最新推荐文章于 2024-10-09 00:58:21 发布

阅读量166

点赞数

分类专栏：笔记文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_51603531/article/details/122437792

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

组件化开发

为什么组件里的data必须是函数
方便复用，如果data是一个对象会造成数据共享，多次使用该组件时，改变一个会影响其他组件。data是一个函数时，每复用一个组件则会返回一个新的data，改变一个不会影响其他组件。

父子通信
1.通过props向子组件传递数据
2.通过事件向父组件发消息

父传子: props
props数据验证支持：String,Number,Object,Symbol,Boolean,Array,Date,Function.

<div id="app">
        <!-- 驼峰标识需要写成“-” -->
        <cpn :c-info='info' :child-message='message'></cpn>
    </div>
    <template id='cpn'>
        <div>
            <h2>{{cInfo}}</h2>
            <h2>{{childMessage}}</h2>
        </div>
    </template>
    <script src="vue.js"></script>
    <script>
        //子组件
        const cpn = {
            template: "#cpn",
            props: {
                cInfo: {
                    type: Object,
                    default() {
                        return {}
                    }
                },
                childMessage: {
                    type: String,
                    default: ''
                }
            }
        }
        //父组件
        const app = new Vue({
            el: '#app',
            data: {
                info: {
                    name: 'why',
                    age: 22,
                    height: '1.78',
                },
                message: '123456'
            },
            components: {
                cpn
            }
        })
    </script>

子传父: $emit

<body>
    <!-- 父组件模板 -->
    <div id="app">
        <cpn @itemclick='cpnClick'></cpn>
    </div>
    <!-- 子组件模板 -->
    <template id='cpn'>
        <div>
            <button v-for="item in categories" @click='btnClick(item)'>{{item.name}}</button>
        </div>
    </template>
    <script src="vue.js"></script>
    <script>

        // 子组件
        const cpn = {
            template: "#cpn",
            data() {
                return {
                    categories: [
                        {
                            id: 01,
                            name: "家具"
                        },
                        {
                            id: 02,
                            name: "文具"
                        },
                        {
                            id: 03,
                            name: "电器"
                        }
                    ]
                }
            },
            methods: {
                btnClick(item) {
                    this.$emit('itemclick',item)
                }
            },
        }
        // 父组件
        const app = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                cpnClick(item) {
                    console.log('cpnClick',item);
                }
            },
            components: {
                cpn: cpn,
            }
        })
    </script>
</body>

双向绑定
子组件不能直接绑定props中的数据，props中的数据需要在父组件中进行修改.props中的改变应该来自于父组件，可使用data

<body>
    <div id="app">
        <cpn :number1='num1' :number2='num2' @num1change='num1change1' @num2change='num2change'></cpn>
    </div>

    <template id="cpn">
        <div>
            <h2>props :{{number1}}</h2>
            <h2>data : {{dnumber1}}</h2>
            <input type="text" :value='dnumber1' @input='num1Input'>
            <h2>props:{{number2}}</h2>
            <h2>data : {{dnumber2}}</h2>
            <input type="text" :value='dnumber2' @input='num2Input'>
        </div>
    </template>

    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                num1: 0,
                num2: 1,

            },
            methods: {
                num1change1(value) {
                    this.num1 = value;

                },
                num2change(value) {
                    this.num2 = value
                }
            },
            components: {
                cpn: {
                    template: '#cpn',
                    props: {
                        number1: Number,
                        number2: Number
                    },
                    data() {
                        return {
                            dnumber1: this.number1,
                            dnumber2: this.number2,
                        }

                    },
                    methods: {
                        num1Input(event) {
                            this.dnumber1 = event.target.value;
                            this.$emit('num1change', this.dnumber1);
                        },
                        num2Input(event) {
                            this.dnumber2 = event.target.value;
                            this.$emit('num2change', this.dnumber2);

                        }
                    },
                }
            }
        })
    </script>
</body>

在这里插入图片描述