vue组件学习(二)

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

父传给子: 直接在组件上传,如: (冒号和不要冒号的区别,有冒号会自动转为相应的类型)在名为count的组件,父组件传了number=2的值给子组件

子组件通过props:['number'] 接收;

子传给父组件: 通过$emit('change',参数),change可以任意命名,向父组件暴露数据接口

父组件通过监听"change"然后调用 一个方法获取到的参数和值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue组件" title="vue组件">vue组件学习~父子间的数据传递</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div >
        <coun :number="1" @inc="handleNumber"></coun>
        <coun :number="3" @inc="handleNumber"></coun>
        <div>总计: {{total}}</div>
    </div>
    <script>
        var counter = {
            props: ['number'],
            data:function () {
                return {
                    mynumber: this.number, //单向数据流,子组件不能直接改父组件的数据,保存到子组件变量中修改
                }
            },
            template: '<div @click="handeClick">{{mynumber}}</div>',
            methods: {
                handeClick:function () {
                    this.mynumber += 2; // 每次点击加2
                    this.$emit('inc',2);// 把每次改变的数字传出去给父组件
                }
            }
        }
        var vm = new Vue({
            el: '#root',
            data:{
                total: 4,//暂时写死,可能用计算属性来计算
            },
            components: {
                coun: counter
            },
            methods: {
                handleNumber:function (number) {
                    this.total += number
                }
            }
        })
    </script>
</body>
</html>

2, 组件参数校验与非props特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue组件学习~父子间的数据传递</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div >
        <coun :number="1" @inc="handleNumber"></coun>
        <coun :number="3" @inc="handleNumber"></coun>
        <div>总计: {{total}}</div>
    </div>
    <script>
        var counter = {
//            props: ['number'],
            //对父组件传进来的参数进行验证
            props: {
                // 验证传进来的number为字符串类型
                number: String
            },
            //对父组件传进来的参数进行验证
            props: {
                // 验证传进来的number为数字类型
                number: String
            },
            props: {
                // 验证传进来的number为数字类型和字符串类型
                number: [Number,String]
            },
            props: {
                // 验证传进来的number为数字类型和字符串类型
                number: {
                   type: [Number,String],
                   required: true, // true为必传
                   default: '如果没有传,就用默认值',//默认值
                    validator: function (value) {//自定义校验, value为传进来 的值
                        return (value.length > 5);// 对传进来的参数长度限制
                    }
                },
            },
            // 展示了props的多种用法,使用其中之一就好
            data:function () {
                return {
                    mynumber: this.number, //单向数据流,子组件不能直接改父组件的数据,保存到子组件变量中修改
                }
            },
            template: '<div @click="handeClick">{{mynumber}}</div>',
            methods: {
                handeClick:function () {
                    this.mynumber += 2; // 每次点击加2
                    this.$emit('inc',2);// 把每次改变的数字传出去给父组件
                }
            }
        }
        var vm = new Vue({
            el: '#root',
            data:{
                total: 4,//暂时写死,可能用计算属性来计算
            },
            components: {
                coun: counter
            },
            methods: {
                handleNumber:function (number) {
                    this.total += number
                }
            }
        })
    </script>
</body>
</html>

非props特性,其它就是给dom添加个自定义属性,显示在dom标签中,就是父组件给子组件传值,但子组合没有用props来接收,那就显示在dom中

以上是 vue组件学习(二) 的全部内容， 来源链接： utcz.com/z/374594.html

回到顶部