Vue学习3 - 属性值的监控watch、组件的创建、组件间的通信、插槽-6ren

Vue学习3 - 属性值的监控watch、组件的创建、组件间的通信、插槽

转载作者：知者更新时间：2024-03-13 07:58:25

1. 监听属性值的变化 - watch

语法要求：watch里面的函数名必须跟date里面属性名一致

<body>
    <div id="vueBox">
        <p>{{num}}</p>
        <button v-on:click="add">添加</button>
    </div>
</body>

<script type="text/javascript">

    var vue = new Vue({
        el: "#vueBox",
        data: {
            num: 0
        },
        methods: {
           add: function() {
               this.num++;
           }
        },
        watch: {
            num: function(newValue, oldValue) {
                console.log("新值："+newValue);
                console.log("旧值："+oldValue);
            }
        }

    })

</script>

2. 组件创建 - component

**作用：**相同的部分提取出来，通过包含技术，实现避免重复内容的编写 – 即共享代码

语法特点：

该vue对象的定义差不多，区别就是date属性变成函数date()
使用时直接<组件名></组件名>即可
组件名不可使用驼峰命名法，如果下划线_进行区分单词含义
注意：template里面的节点只能有一个祖宗，否则丢失一个祖宗（单个根元素）
不可写成template:"

你好

按钮"

语法：templates属性可以是字符串可以是模板内容

Vue.component("my-tag",{
    template: "<div></div>"    --字符串
    template:`<div></div>`    --模板字符串
})

2.1 全局组件

全局组件内部可以引用全局组件

特点：组件一旦全局注册，即使整个项目没有使用该组件，依然会随者Vue的加载而加载组件复用时，是相互独立，相同的组件间不会受彼此影响

<body>
    <div id="vueBox">
        <my_component></my_component>
        <my_component></my_component>        
    </div>
</body>

<script type="text/javascript">

   Vue.component("my_component", {
       template: "<div><p>数字:{{num}}</p><button v-on:click='add'>添加</button></div>",
       data() {
           return {
               num:0
           }
       },
       methods: {
           add: function() {
               this.num++;
           }
       }
   })

    var vue = new Vue({
        el: "#vueBox"
    })

</script>

2.2 局部组件

局部组件内部不可以引用局部组件

特点： 对于不频繁使用的组件，则将其定义在Vue实例里面 - 成为Vue实例一个子集

<body>
    <div id="vueBox">
        <my_component></my_component>
        <my_component></my_component>
    </div>
</body>

<script type="text/javascript">

   const myComponent = {
       template: "<div><p>数字:{{num}}</p><button v-on:click='add'>添加</button></div>",
       data() {
           return {
               num:0
           }
       },
       methods: {
           add: function() {
               this.num++;
           }
       }
   }

    var vue = new Vue({
        el: "#vueBox",
        components: {
            my_component: myComponent
        }
    })

</script>

3 组件间的通信

如果一个单页面以组件形式构成，则能刻画成一颗多节点的树

3.1 父向子组件传递数据 - props

3.1.1 动态绑定

注意父组件传递的值只会起效第一次，子组件改变属性值并不会影响父组件，父组件属性值改变并不影响子组件属性值

v-bind:子属性=“父属性” 等价于 :子属性="父属性"

<body>
<div id="vueBox">
    <my_component v-bind:content="conten1"></my_component>
    <my_component :content="content1"></my_component>
    <button v-on:click="add">父组件按钮增加</button>
</div>
</body>

<script type="text/javascript">

    Vue.component("my_component", {
        template: "<div><p>数字：{{content}}</p><button v-on:click='chang'>字组件按钮增加</button></div>",
        props: ["content"],
        methods: {
            chang: function() {
                this.content++
            }
        }
    })

    var vue = new Vue({
        el: "#vueBox",
        data: {
            content1: 10
        },
        methods: {
          add: function(){
              this.content1++
          }
        }

    })

</script>

执行流程

语法注意

$emit( 自定义事件名，传参 ) - 自定义组件的事件名
@组件事件名=‘父组件的方法’ - 触发方法
$event接收 $emit()的参数值

<body>
    <div id="vueBox">
        <p>{{num}}</p>
       <my-tag @my-add-event="fatherAdd($event)"></my-tag>
    </div>
</body>

<script type="text/javascript">

    Vue.component("my-tag", {
        template: "<p><button v-on:click='add'>数字增加</button></p>",
        methods: {
            add: function() {
                this.$emit("my-add-event", 10)
            }
        }
    })

    var vue = new Vue({
        el: "#vueBox",
        data: {
            num: 1
        },
        methods: {
            fatherAdd: function(val) {
                this.num = this.num +val;
            }
        }

    })

</script>

3.1.2 静态绑定

<body>
    <div id="vueBox">
       <my-tag title="父组件传来的字面量"></my-tag>
       <my-tag></my-tag>
    </div>
</body>

<script type="text/javascript">

    Vue.component("my-tag", {
        template: "<p>{{msg}}--{{title}}</p>",
        data: function(){
            return {msg: '组件的内置数据'}
        },
        props: {
            title: {
                type: String,
                default: "预设的值"
            }
        }

    })

    var vue = new Vue({
        el: "#vueBox",
        data: {
            nums: [1,2,3,4]
        }
       
    })

</script>

注意：

v-bind:props属性名:"" – 会自动转对应的数据类型
props属性名:"" – 全局都为字符串String类型数据

<body>
    <div id="vueBox">
       <my-tag msg1="200" :msg2="200"></my-tag>
    </div>
</body>

<script type="text/javascript">

    Vue.component("my-tag", {
        template: "<p>{{typeof msg1}} -- {{typeof msg2 }}</p>",

        props: ["msg1", "msg2"]

    })

    var vue = new Vue({
        el: "#vueBox",
        data: {
        }

    })

</script>

3.2 子向父组件传递数据 - v-bind:属性绑定

数据传递原则： 单向数据流原则，尽量少的子组件改变父组件的数据

在组件改变父组件属性的时候，必须使用this.$emit(“自定义事件名”) - 发出一个事件出去
并且在绑定函数时 @事件名=“父组件处理函数名” – 父组件对事件相应的处理

<body>
    <div id="vueBox">

        <p>父组件num：{{num}}</p>
        <my_component :num1="num" @add="add" @reduce="reduce" ></my_component>
    </div>
</body>

<script type="text/javascript">

    Vue.component("my_component", {

        template: "<div><p>子组件num1：{{num1}}</p><button v-on:click='add'>增加</button><button v-on:click='reduce'>减少</button></div>",

        props: ["num1"],
        methods: {
            add: function() {
                this.$emit("add");
            },
            reduce: function() {
                this.$emit("reduce");
            }
        }
    })

    var vue = new Vue({

        el: "#vueBox",
        data: {
            num : 0
        },
        methods: {
            add: function() {
                this.num++;
            },
            reduce: function() {
                this.num--;
            }
        }

    })

</script>

3.3 非父子组件间的传递信息

利用中间媒介（事件中心）进行传递

利用一个Vue实例进行做组件间的信息传递

<div id="vueBox">
    <button v-on:click="destoryMsg">销魂两兄弟组件的信息交互</button>
    <my-tag1></my-tag1>
    <my-tag2></my-tag2>

</div>
</body>

<script type="text/javascript">

    // 信息中心 - 媒介
    var msgCenter = new Vue();

    Vue.component("my-tag1", {
        template: "<div><p>tag1的num：{{num}}</p><button v-on:click='handle'>数字增加</button></div>",
        data: function () {
            return {
                num: 0
            }
        },
        methods: {
            handle: function () {
                // 向信息中心发送tag1-event事件
                msgCenter.$emit("tag1-event", 20)
            }
        },
        mounted: function () {
            // 信息中心在这里进行执行监听tag2-event事件
            msgCenter.$on("tag2-event", (val) => {
                this.num = this.num + val;
            })
        }
    })

    Vue.component("my-tag2", {
        template: "<div><p>tag2的num：{{num}}</p><button v-on:click='handle'>数字增加</button></div>",
        data: function () {
            return {
                num: 0
            }
        },
        methods: {
            handle: function () {
                msgCenter.$emit("tag2-event", 10)
            }
        },
        mounted: function () {
            msgCenter.$on("tag1-event", (val) => {
                this.num = this.num + val;
            })
        }
    })

    var vue = new Vue({
        el: "#vueBox",
        methods: {
            destoryMsg: function () {
                msgCenter.$off("tag1-event");
                msgCenter.$off("tag2-event");
            }
        }
    })

</script>

4 组件的插槽 - slot

4.1 无名插槽

父组件向子组件传递内容

如果没有标签则自定义组件插入的内容不会显示出来

<head>
    <meta charset="UTF-8">
    <title>Vue测试</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="vueBox">
        <my-component><a>你很丑</a></my-component>
        <my-component><a>太矮了</a></my-component>
        <my-component></my-component>
    </div>
</body>

<script type="text/javascript">

   Vue.component("my-component",{
       template: `
            <div>
                <span style="color:red">错误提示：</span>
                <slot><a>默认内容</a></slot>
            </div>`,
   })

    var vue = new Vue({
        el: "#vueBox"
    })

</script>

4.2 有名插槽 - 意味一个组件可写多个插槽

4.2.1 不使用标签

模版上使用name进行插槽命名，使用slot进行标记插在哪一个槽上

<body>
    <div id="vueBox">
       <my-component>
            <span>填入无名插槽</span>
            <span slot="name1">填入name1插槽</span>
            <span slot="name2">填入name2无名插槽</span>
       </my-component>
    </div>
</body>

<script type="text/javascript">

   Vue.component("my-component",{
       template: `
            <div>
                <span style="color:red">错误提示：</span><slot><a>默认内容无名插槽</a></slot>
                <br/>

                <span style="color:red">错误提示：</span><slot name="name1"></slot>
                <br/>

                <span style="color:red">错误提示：</span><slot name="name2"></slot>
                <br/>
            </div>`,
   })

    var vue = new Vue({
        el: "#vueBox"
    })

</script>

4.2.2 使用标签

<body>
    <div id="vueBox">
       <my-component>
           <template>
               <span>填入无名插槽</span>
           </template>
           
           <template slot="name1">
               <span >填入name1插槽</span>
           </template>
           
           <template slot="name2">
               <span >填入name2无名插槽</span>
           </template>
       </my-component>
    </div>
</body>

<script type="text/javascript">

   Vue.component("my-component",{
       template: `
            <div>
                <span style="color:red">错误提示：</span><slot><a>默认内容无名插槽</a></slot>
                <br/>

                <span style="color:red">错误提示：</span><slot name="name1"></slot>
                <br/>

                <span style="color:red">错误提示：</span><slot name="name2"></slot>
                <br/>
            </div>`,
   })

    var vue = new Vue({
        el: "#vueBox"
    })

</script>

4.3 作用域插槽

父组件对子组件内容进行加工处理

下列示例的数据流动图片

vue实例的students数据全局组件的studentsmsg属性args属性

<body>
    <div id="vueBox" >
       <my-component v-bind:students="students">
           <template slot-scope="args">
                <span v-if="args.msg.id == 2" style="color:red">{{args.msg.name}}</span>
                <span v-else>{{args.msg.name}}</span>
           </template>

       </my-component>
    </div>
</body>

<script type="text/javascript">

   Vue.component("my-component",{
       template: `
            <ul>
                <li v-for="student in students"><slot :msg="student"></slot></li>
            </ul>
       `,
       props:["students"]

   })

    var vue = new Vue({
        el: "#vueBox",
        data: {
            students: [{
                id: 1,
                name: 'lrc'
            },{
                id: 2,
                name: 'lcj'
            },{
                id: 3,
                name: 'yxx'
            }]
        }
    })

</script>

文章推荐： HtmlUnit（Java） - 快速入门学习 - 无界面浏览器

文章推荐： docker安装nginx

文章推荐： el-admin前端学习笔记

ubuntu - 如何使用 Zabbix 3.2 监控 Tomcat 7.0 | Zabbix 上的 Tomcat 监控
我已经在 ubuntu 14.0 上成功安装了 Zabbix 3.2 服务器主机上的 Z 是绿色的。不幸的是，JMX 是红色的。 Zabbix 服务器:192.168.1.112 带有 tomcat
Azure服务总线统计/监控
我想制作一个仪表板，显示我们的 Azure 服务总线队列的状态，并显示“添加到队列的消息”、“队列长度”和“已处理的消息”等的历史记录。使用 Azure 管理门户，我可以看到，这些统计信息大部分是手动
Mysql事件日志(监控)
我的 MYSQL 每天晚上都有事件，但我不太确定发生了什么，因为即使我将其设置得早于其他事件，它仍然在早上运行。问题是，我如何检查运行事件的历史记录或日志，哪一个晚上锁了，哪一个是跑了没跑？谢谢
监控 log文件大小的存储过程
1、监控log文件大小超过10g的server 和db 复制代码代码如下: create procedure db_sendmail_mssqllogsize as&n
监控 Spring 方法执行的性能
本教程讨论如何使用 AspectJ 开源框架监控 Spring 应用程序在方法执行方面的性能。传统上，监控每个 Java 方法所花费的时间的最简单方法是在方法的开头和结尾包含一些跟踪行： publi
monitoring - MSMQ 监控
有什么可以帮助 msmq 监控的吗？当消息出现在队列中并且在休假时相同时，我想获得一些事件/监视器。最佳答案查看 Windows 管理性能计数器。如果您查看管理工具并找到“性能计数器”，您将能够
监控 Commons DBCP？
我的 Tomcat 中的一个巨大的 web 应用程序有时会开始使用过多的 DBCP 连接，从而导致问题。为了进行调查，我想在每个时间点准确地知道什么线程/方法持有池的连接。不需要是实时的，事后分析就
Jquery cookie 监控
在浏览器的整个页面生命周期中监视 cookie 并在 cookie 更改时触发事件的最佳 JS 或 JQuery 特定方法是什么？最佳答案据我所知，不可能将 change (或类似)事件直接绑定(
python - 获取笔记本的详细实时报告/监控
我想尽可能详细地报告我的笔记本的执行情况。简而言之，我想实时查看我的笔记本正在执行的每个操作。例如，我的一个函数有一个 sleep 周期为 5 秒的循环，我希望看到程序实际上正在 sleep 并且循环
azure - Azure容器服务中Kubernetes集群的日志记录/监控
Azure 容器服务是否与 Azure Monitor 集成？想知道对 kubernetes 集群进行日志记录/监控的最佳方法是什么？最佳答案如果您正在 Azure 上寻找监视工具，您可能需要使用
erlang - 监控 gen_server
我一直在尝试使用 erlang:monitor/2 来监视 gen_server。不幸的是，每次我尝试这个时，Erlang shell 都会进入无限循环。这是我为测试这一点而编写的测试程序。 -mo
azure - Azure容器服务中Kubernetes集群的日志记录/监控
Azure 容器服务是否与 Azure Monitor 集成？想知道对 kubernetes 集群进行日志记录/监控的最佳方法是什么？最佳答案如果您正在 Azure 上寻找监视工具，您可能需要使用
监控 Kafka 消费者滞后
我想使用编写一个 shell 脚本来监控集群中的消费者滞后 bin/kafka-run-class.sh kafka.tools.ConsumerOffsetChecker --zkconnect
c# - 多线程锁定/监控
在 .NET 中，假设 thread A 锁定了一个对象。同时，线程B和线程C被阻塞，等待线程A解锁对象。现在，线程 A 解锁了对象。接下来将选择哪个线程(B 或 C)？它是如何确定的？最佳答案
iPhone 数据使用跟踪/监控
我搜索过这个主题，但发现很少有有用的细节。有了这些细节，我尝试编写一些代码如下。注意:在将此帖子标记为重复之前，请将此帖子中共享的详细信息与其他帖子进行比较，而不仅仅是按主题。 - (NSArray
深入理解spring boot 监控
目录 1、指标监控 2、常用的监控端点 3、定制EndPoint 4、spring boot admin（可以使用）
java - 监控 Kafka 主题的消费者数量
我们使用 Prometheus 和 Grafana 来监控我们的 Kafka 集群。在我们的应用程序中，我们使用 Kafka 流，Kafka 流有可能因异常而停止。我们正在记录事件 setUnCau
performance - 监控 ffmpeg 流的网络性能
我正在建立一个复杂的网络仿真，并试图捕捉一些重要的性能测量。我在服务器上运行了 mininet，并且我将视频从一个 mininet 主机流式传输到另一个(使用 -nodisp 选项，因为我没有 GU
jenkins - 监控 openstack4j 的请求量
Jenkins 的 openstack-plugin 使用 openstack4j 与 openstack 云对话。我正在寻找一种方法，我们可以从客户端的角度监控 openstack4j 所做的 ht
macos - 监控 Thunderbolt 端口连接的变化
我正在处理一项需要监控 Thunderbolt 端口连接变化的要求。 (当连接或断开 Thunderbolt 电缆时)。我尝试使用 IOServiceMatching(kIOUSBInterface

知者

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城