vue学习笔记5： vue父子组件传值

最新推荐文章于 2023-04-29 09:57:37 发布

老驴看景

最新推荐文章于 2023-04-29 09:57:37 发布

阅读量136

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43835194/article/details/111474024

版权

父组件通过属性的方式向子组件传值，子组件通过props进行接收
vue中有单项数据流的概念，子组件只能接收父组件的值，不能直接对父组件传过来的值进行修改，因为子组件可能被多个地方引用，容易造成其他组件的错误
可以在子组件中进行data定义，复制父组件传过来的值
在用$emit时候可以传递参数的形式向父组件传值
props特性：子组件对父组件传递过来的参数进行接收，可以直接使用不会显示在dom结构上
非props特性：子组件没有对父组件传递的参数进行接收，这样传递过来的参数会显示在dom结构上

父子组件传值举例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-组件</title>
</head>

<body>
    <div id="app">
        {{total}}
        <counter :count="1" @change="handelTotal"></counter>
        <counter :count="2" @change="handelTotal"></counter>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var counter = {
            props:{
                count: { 
                    type:String,
                    required: false,
                    default:'default value',
                    validator: function(value) {
                        return (value.length>5)
                    }
                }
            },
            data: function () {
                return {
                    number: this.count
                }
            },
            template: '<div @click="handleItemClick">{{number}}</div>',
            methods: {
                handleItemClick: function () {
                    this.number = this.number+1;
                    this.$emit('change', 1);
                }
            }
        }
        var vm = new Vue({
            el: '#app',
            components: {
                counter: counter
            },
            data: {
                total: 3
            },
            methods: {
                handelTotal: function (a) {
                   this.total += a
                }
            }
        })
    </script>
</body>

</html>