vue学习之组件传值、自定义事件

发布于：2022-10-19 ⋅ 阅读:(321) ⋅ 点赞:(0)

1、静态传值

注意：在template中不要加样式，因为不会起到任何作用他是不会执行的

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <style>

    </style>
</head>

<body>
    <!-- 静态传值 -->
    <div id="root">
        <!--使用组件 -->
        <com-son movies="狐妖小红娘" haha="我是父组件传过来的一句话"></com-son>

    </div>
    <!-- 子组件html部分 -->
    <template id="myson">
        <div>
            <!-- 静态 -->
            <h1>我是子组件</h1>
            <h1>{{movies}}</h1>
            <h1>{{haha}}</h1>
        </div>
    </template>
    <script>
        // 创建子组件
        let ComSon = {
            template: "#myson",
            props: ['movies', "haha"],

        }
        const vm = new Vue({
            el: '#root',
            data() {
                return {

                }
            },
            methods: {
            },
            // 注册成一个局部组件
            components: {
                ComSon
            }
        });
    </script>
</body>

</html>

效果图：

2、动态传值 

要保证父组件里面的变量名=props里面的值=templ中的插值{{}}

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <style>
        .fa {
            width: 800px;
            height: 800px;
            background-color: PINK;
            padding: 20px;
        }

        .fa button {
            width: 300px;
            height: 100px;
            margin-top: 20px;
        }

        .son {
            width: 600px;
            height: 600px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="root" class="fa">
        <!-- 动态传值 -->
        <!-- 变量名=“值” -->
        <com-son :message="msg"></com-son>
        <button @click="change">改变msg值</button>
    </div>
    <template id="myson">
        <div class="son">
            <h1>我是子组件</h1>
            <h1>{{ message }}</h1>

        </div>
    </template>
    <script>
        let ComSon = {
            template: "#myson",
            // 动态传参
            props: ["message"]

        }
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    msg: '哈哈，我又回来了'
                }
            },
            methods: {
                change() {
                    this.msg = '嘿嘿，交作业了'
                }
            },
            components: {
                ComSon
            }
        });
    </script>
</body>

</html>

效果图：

 3、子组件里面的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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <style>
        .fa {
            width: 600px;
            height: 600px;
            background-color: PINK;
            padding: 20px;
        }

        .son {
            width: 300px;
            height: 200px;
            background-color: green;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <!-- 静态传值 -->
    <!-- ：v-bind 动态 -->
    <div id="root" class="fa">
        <com-son :msg="msg" :heihei="heihei"></com-son>
    </div>
    <!-- 子组件html部分 -->
    <template id="myson">
        <div class="son">
            <h1>我是子组件</h1>
            <h1>{{msg}}</h1>
            <button @click="change">改变props</button>
            <h1>{{heihei}}</h1>
            <h1>{{xixi}}</h1>
            <h1 v-for="item in haha">{{item}}</h1>

        </div>
    </template>
    <script>
        // 创建子组件
        let ComSon = {
            template: "#myson",
            // 4 数组方式
            props: ["msg", "heihei"],
            data() {
                return {
                    haha: [],
                }
            },
            methods: {
                change() {
                    console.log(this.msg);
                    this.msg = '压根改不了'
                }
            },
            computed: {
                xixi() {
                    for (let i of this.heihei) {
                        let a = i * 10
                        this.haha.push(a)
                    }
                    return this.haha
                }
            },


        }




        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
        // 父亲页面
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    msg: '哈哈我又回来了',
                    heihei: [3, 4, 5, 6],

                }
            },
            methods: {

            },
            // 注册成一个局部组件
            components: {
                ComSon
            }
        });
    </script>
</body>

</html>

效果图：

4、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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <style>
        .fa {
            width: 600px;
            height: 600px;
            background-color: PINK;
            padding: 20px;
        }

        .son {
            width: 300px;
            height: 200px;
            background-color: green;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <!-- 静态传值 -->
    <!-- ：v-bind 动态 -->
    <div id="root" class="fa">
        <com-son :msg="msg" :haha="haha" :tuanzi="tuanzi" :heihei="heihei"></com-son>
    </div>
    <!-- 子组件html部分 -->
    <template id="myson">
        <div class="son">
            <h1>我是子组件</h1>
            <!-- 4 -->

            <h1>{{msg}}</h1>
            <h1>{{haha}}</h1>
            <h1>{{heihei}}</h1>
            <h1>{{tuanzi}}</h1>
        </div>
    </template>
    <script>
        // 创建子组件
        let ComSon = {
            template: "#myson",
            // props: ["msg", 'haha'],
            // 对象
            props: {
                msg: {
                    // 判断类型-type
                    // type: Boolean,
                    typeof: String
                },
                haha: {
                    type: String,
                    // 默认值default,没有传值过来时
                    default: '我是备胎'
                },
                heihei: {
                    type: String,
                    // 是不是必传，false是不必须
                    required: true
                },
                tuanzi: {
                    // 自定义验证函数
                    validator: function (value) {
                        console.log(value);
                        return ['success', 'warning', 'danger', 'haha'].includes(value)
                    }
                }
            },

        }




        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
        // 父亲页面
        const vm = new Vue({
            el: '#root',
            data() {
                return {

                    msg: '哈哈我又回来了',
                    // haha: '我不怕',
                    haha: '我是正主',
                    heihei: '我是必须要传的',
                    tuanzi: 'haha'
                }
            },
            methods: {

            },
            // 注册成一个局部组件
            components: {
                ComSon
            }
        });
    </script>
</body>

</html>

二、自定义事件

1、子组件传父组件

向父组件发送事件有三种形式：

        1、静态数据  $emit('事件名‘，’数据’）

        2、动态数据 $emit('事件名',动态数据）

        3、传递多个参数时，父组件可以使用不定参的形式接收

注意：子组件里面定义的事件名要同写在父组件里面的事件名称保持一致，在父组件上通过其他事件去接收子组件传来的数据。

 

 源代码：

<body>
    <div id="root">
        <com-son @recep="change"></com-son>
        {{ha}}
        {{fa}}
    </div>
    <template id="son">
        <div class="son">
            <h1>我是子组件</h1>
            <button @click="send">子组件传父</button>
        </div>
    </template>
    <script>
        let ComSon = {
            template: '#son',
            data() {
                return {
                    msg: '那都不是事',

                }
            },
            methods: {
                send() {
                    console.log('向父组件发送事件');
                    // 发送静态数据
                    // this.$emit('recep', '我是子组件里面传过来的哟！！！')
                    // 发送动态数据
                    // this.$emit('recep', this.msg)
                    // 传多参
                    this.$emit('recep', '我是子组件里面传过来的哟！！！', this.msg, '嘎嘎嘎嘎')
                }
            }
        }
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    ha: '',
                    fa: '我是父组件的值'
                }
            },
            methods: {
                change(...e) {
                    console.log(e);
                    // console.log(b);
                    this.ha = e[0]
                    this.fa = e[2]
                }
            },
            components: {
                ComSon
            }
        });
    </script>
</body>

效果图：

 

2、ref和refs

 <div id="root">
        <!-- 作用域普通元素 ,可以获取到这个元素的dom节点，从而进行dom操作-->
        <p ref="mp">这是p元素</p>
        <p id="hap">这是另一个p元素</p>
        <button @click="change">获取ref</button>


    </div>
    <script>
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                }
            },
            methods: {
                change() {
                    let ha = this.$refs.mp
                    console.log(ha);
                    ha.style.border = '5px solid red'
                    let b = document.getElementById('hap')
                    console.log(b);
                }
            }
        });
    </script>
</body>

效果图：

 3、ref和refs作用到组件

作用于组件props和ref：
1、props：主要用于传递数据，但不能调用子组件的方法和属性（单向绑定，父传子）
2、ref:主要引用，主要是调用子组件的方法，拿子组件的实例
3、$emit：用于事件传递（子组件触发父组件里面的方法）

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <style>
        #root {
            width: 600px;
            height: 600px;
            background-color: yellowgreen;
        }

        .son {

            width: 200px;
            height: 200px;
            background-color: burlywood;
        }
    </style>
</head>

<body>
    <div id="root">

        <com-son ref="myson"></com-son>
        <button @click="change">获取ref</button>

    </div>
    <template id="son">
        <div class="son">
            <h1>我是子组件</h1>
            <h1>{{haha}}</h1>
        </div>
    </template>
    <script>
        let ComSon = {
            template: '#son',
            data() {
                return {
                    msg: '我是子组件的数据',
                    haha: ''
                }
            },
            methods: {
                heihei(e) {
                    // this.msg = '我被父组件调用改变了'
                    this.haha = e
                }
            }
        }
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                }
            },
            methods: {
                change() {
                    let ha = this.$refs.myson
                    console.log(ha);
                    console.log(ha.msg);
                    let b = ha.heihei()
                    console.log(ha.msg);
                    ha.heihei('父组件穿过来的')
                }
            },
            components: {
                ComSon
            }
        });
    </script>
</body>

</html>

效果图：

 

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布