vue day05 组件扩展

最新推荐文章于 2024-10-15 18:17:59 发布

parkwoojin1102

最新推荐文章于 2024-10-15 18:17:59 发布

阅读量101

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/parkwoojin1102/article/details/118275726

版权

父组件给子组件传值

步骤：

接收父组件传值

在子组件里设置props属性就可以接受父组件传值把父组件传递的内容写到props里

html部分：


<template id="login">
    <div>
      登录
      <div id="father">我是父组件上的内容</div>
      <son id="son1" ref="myson"></son>

      <div ref="divref1">ref1</div>
    </div>
</template>

<template id="son">
        <div>子组件{{pagesize}}</div>
    </template>

设置传递类型利用ref属性绑定组件获取元素

        Vue.component("login", {
            template: "#login",
            // 页面渲染后
            mounted() {
                // 利用ref属性
                console.log(this.$refs);
                let myson = this.$refs.myson;

                console.log(myson.num1);
                console.log(myson.sum(2, 3));
                // 通过ref属性设置样式
                console.log(this.$refs.divref1);
                this.$refs.divref1.style.color = "green"
            }
        });
        //子组件
        Vue.component("son", {
            template: "#son",
            data() {
                return {
                    num1: 11
                }
            },
            props: {
                pagesize: {
                    type: [String, Number],
                    //设置默认值
                    default: 20
                }
            },
            methods: {
                sum(a, b) {
                    return a + b
                }
            }
        })

注意：data和props的区别

data是组件私有的，props是父组件传过来的
data是可以修改的，props是只读的

ref的使用

获取dom节点
- 给dom节点记上ref属性，可以理解为给dom节点起了个名字。
- 加上ref之后，在$refs属性中多了这个元素的引用。
- 通过vue实例的$refs属性拿到这个dom元素。

获取组件
- 给组件记上ref属性，可以理解为给组件起了个名字。
- 加上ref之后，在$refs属性中多了这个组件的引用。
- 通过vue实例的$refs属性拿到这个组件的引用，之后可以通过这个引用调用子组件的方法，或者获取子组件的数据。

子组件给父组件传值

子组件调用父组件的方法

首先在父组件中自定义一个名字(@fromfather=方法（fromson) ) 方法写在父组件的methods中,data作为参数，用来接收子组件传来的数据。子组件中绑定一个点击事件@click='tofather' 方法写在子组件的methods中this.$emit('fromfather',数据)

在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的）
子组件可以触发这个事件$emit('事件名字')

子组件给父组件传递数据

$emit方法第二个参数可以定义子组件给父组件传递的内容
在父组件中怎么拿到这内容

父组件这个方法没有自定参数，在父组件的方法直接加这个参数就可以拿到
- 父组件有自定义参数，可以传入$event也可以拿到子组件传递的数据。通过$event只能传递第一个参数。

    <template id="father">
        <div>
            父组件
            <son @fromfather="fromson"></son>
            这个是子组件传过来的：{{msg}}
        </div>
    </template>

    <template id="son">
        <div>子组件
            <button @click="tofather">点击传值</button>
        </div>
    </template>

    <script>
        // 父组件
        Vue.component("father", {
            template: "#father",
            data() {
                return {
                    msg: "",
                }
            },
            methods: {
                fromson(data) {
                    console.log(data);
                    this.msg = data;
                }
            }

        });
        // 子组件
        Vue.component("son", {
            template: "#son",
            data() {
                return {
                    num1: 11
                }
            },
            methods: {
                tofather() {
                    console.log(666);
                    // 在子组件中给父组件传值 
                    // 也可以通过这个方法在子组件中触发事件
                    this.$emit("fromfather", this.num1)
                }
            }
        })
    </script>

父传子实例：（获取评论）

<!DOCTYPE html>
<html>

<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></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="./bootstrap-3.3.7.css">
</head>

<body>
    <div id='app'>

        <div class="container">

            <son @fromson='getcommet'></son>

            <ul class="list-group">
                <li class="list-group-item" v-for="(item,index) in commentlist" :key="index">{{item.comment}}
                    <span class="badge">{{item.name}}</span>
                </li>

            </ul>
        </div>
    </div>

    <template id="son">
        <div>
            <form action="" method="POST" class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="">评论人</label>
                    <input type="email" name="" id="" class="form-control" v-model:value="name">
                </div>
                <div class="form-group">
                    <label for="">评论内容</label>
                    <input type="email" name="" id="" class="form-control" v-model:value="comment">
                </div>

                <button type="button" class="btn btn-primary" @click="sendmsg">发布评论</button>

            </form>

        </div>
    </template>
    <script>
        Vue.component("son", {
            template: "#son",
            data() {
                return {
                    name: "",
                    comment: ""
                }
            },
            methods: {
                sendmsg() {
                    //点击时 获取内容，传递给父组件
                    this.$emit("fromson", {
                        name: this.name,
                        comment: this.comment
                    })
                    this.name = this.comment = ""
                }
            }
        })
        const vm = new Vue({
            el: '#app',
            data: {
                commentlist: []
            },
            methods: {
                getcommet(data) {
                    // 接受data，渲染数据
                    console.log(data);
                    // this.commentlist.push(data)
                    // 将最新内容添加到最上边
                    this.commentlist.unshift(data)

                    // 将输入的内容存到缓存中
                    // localStorage只能存字符串和数字
                    //转化成字符串
                    localStorage.setItem('commentlist', JSON.stringify(this.commentlist))
                }
            },
            created() {
                // 判断数组是空 或者从缓存中提取到数组内容   字符串转换成对象
                this.commentlist = localStorage.getItem("commentlist") ? JSON.parse(localStorage.getItem("commentlist")) : []
            }
        })
    </script>
</body>

</html>