Vue—组件化开发2

最新推荐文章于 2023-03-21 21:25:47 发布

木木学长

最新推荐文章于 2023-03-21 21:25:47 发布

阅读量58

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_43599049/article/details/115056200

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1 父子间通信

在这里插入图片描述

（1）父向子传递数据

在组件中，使用选项props来声明需要从父级接收到的数据。props的值有两种方式：

方式一：字符串数组，数组中的字符串就是传递时的名称。
方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <cpn :childrenprops='message'></cpn>
        <cpn :childrenprops='message'></cpn>
        <cpn :childrenprops='message'></cpn>
    </div>


    <template id="cpn">
        <div>{{childrenprops}}</div>
    </template>


    <script src="vue.js"></script>
    <script>
        let a = new Vue({
            el: '#app',
            data: {
                message: 'Hello World!'
            },
            components: {
                'cpn': {
                    template: '#cpn',
                    props: ['childrenprops']
                },
            }
        })
    </script>
</body>

</html>

在前面，我们的props选项是使用一个数组。我们说过，除了数组之外，我们也可以使用对象，当需要对props进行类型等验证时，就需要对象写法了。验证都支持哪些数据类型呢？

String
Number
Boolean
Array
Object
Date
Function
Symbol

（2）子向父传递数据

我们需要使用自定义事件来完成。我们之前学习的v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件。
自定义事件的流程：

在子组件中，通过$emit()来触发事件。
在父组件中，通过v-on来监听子组件事件。

我们来看一个简单的例子：

我们之前做过一个两个按钮+1和-1，点击后修改counter。
我们整个操作的过程还是在子组件中完成，但是之后的展示交给父组件。
这样，我们就需要将子组件中的counter，传给父组件的某个属性，比如total。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <cpn @increment="changecount" @decrement="changecount"></cpn>
        <span>点击次数：{{counter}}</span>
    </div>

    <template id="cpn">
        <div>
            <button @click="increment">+</button>
            <button @click="decrement">-</button>
        </div>

    </template>



    <script src="vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                counter: 0
            },
            methods: {
                changecount(counter) {
                    this.counter = counter;
                }
            },
            components: {
                cpn: {
                    template: '#cpn',
                    data() {
                        return {
                            counter: 0
                        }
                    },
                    methods: {
                        increment() {
                            this.counter++;
                            this.$emit('increment', this.counter);
                        },
                        decrement() {
                            this.counter--;
                            this.$emit('decrement', this.counter);
                        },
                    }
                }
            }
        })
    </script>
</body>

</html>

（3）父子组件访问方式

有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问跟组件。

父组件访问子组件：使用$children或$refs
子组件访问父组件：使用$parent

1）$children

木木学长

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue—组件化开发2

1 父子间通信（1）父向子传递数据在组件中，使用选项props来声明需要从父级接收到的数据。props的值有两种方式：方式一：字符串数组，数组中的字符串就是传递时的名称。方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"
复制链接

扫一扫

专栏目录