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

转x33g5p2x  于2022-02-12 转载在 Vue.js  
字(9.8k)|赞(0)|评价(0)|浏览(687)

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

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

  1. <body>
  2.     <div id="vueBox">
  3.         <p>{{num}}</p>
  4.         <button v-on:click="add">添加</button>
  5.     </div>
  6. </body>
  8. <script type="text/javascript">
  10.     var vue = new Vue({
  11.         el: "#vueBox",
  12.         data: {
  13.             num: 0
  14.         },
  15.         methods: {
  16.            add: function() {
  17.                this.num++;
  18.            }
  19.         },
  20.         watch: {
  21.             num: function(newValue, oldValue) {
  22.                 console.log("新值："+newValue);
  23.                 console.log("旧值："+oldValue);
  24.             }
  25.         }
  27.     })
  29. </script>

2. 组件创建 - component

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

语法特点：

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

你好

按钮"

  1. 语法：templates属性可以是字符串可以是模板内容
  1. Vue.component("my-tag",{
  2.     template: "<div></div>"    --字符串
  3.     template:`<div></div>`    --模板字符串
  4. })
2.1 全局组件

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

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

  1. <body>
  2.     <div id="vueBox">
  3.         <my_component></my_component>
  4.         <my_component></my_component>        
  5.     </div>
  6. </body>
  8. <script type="text/javascript">
  10.    Vue.component("my_component", {
  11.        template: "<div><p>数字:{{num}}</p><button v-on:click='add'>添加</button></div>",
  12.        data() {
  13.            return {
  14.                num:0
  15.            }
  16.        },
  17.        methods: {
  18.            add: function() {
  19.                this.num++;
  20.            }
  21.        }
  22.    })
  24.     var vue = new Vue({
  25.         el: "#vueBox"
  26.     })
  28. </script>

2.2 局部组件

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

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

  1. <body>
  2.     <div id="vueBox">
  3.         <my_component></my_component>
  4.         <my_component></my_component>
  5.     </div>
  6. </body>
  8. <script type="text/javascript">
  10.    const myComponent = {
  11.        template: "<div><p>数字:{{num}}</p><button v-on:click='add'>添加</button></div>",
  12.        data() {
  13.            return {
  14.                num:0
  15.            }
  16.        },
  17.        methods: {
  18.            add: function() {
  19.                this.num++;
  20.            }
  21.        }
  22.    }
  24.     var vue = new Vue({
  25.         el: "#vueBox",
  26.         components: {
  27.             my_component: myComponent
  28.         }
  29.     })
  31. </script>

3 组件间的通信

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

3.1 父向子组件传递数据 - props
3.1.1 动态绑定

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

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

  1. <body>
  2. <div id="vueBox">
  3.     <my_component v-bind:content="conten1"></my_component>
  4.     <my_component :content="content1"></my_component>
  5.     <button v-on:click="add">父组件按钮增加</button>
  6. </div>
  7. </body>
  9. <script type="text/javascript">
  11.     Vue.component("my_component", {
  12.         template: "<div><p>数字：{{content}}</p><button v-on:click='chang'>字组件按钮增加</button></div>",
  13.         props: ["content"],
  14.         methods: {
  15.             chang: function() {
  16.                 this.content++
  17.             }
  18.         }
  19.     })
  21.     var vue = new Vue({
  22.         el: "#vueBox",
  23.         data: {
  24.             content1: 10
  25.         },
  26.         methods: {
  27.           add: function(){
  28.               this.content1++
  29.           }
  30.         }
  32.     })
  34. </script>

执行流程

语法注意

  1. $emit( 自定义事件名，传参 ) - 自定义组件的事件名
  2. @组件事件名=‘父组件的方法’ - 触发方法
  3. $event接收 $emit()的参数值
  1. <body>
  2.     <div id="vueBox">
  3.         <p>{{num}}</p>
  4.        <my-tag @my-add-event="fatherAdd($event)"></my-tag>
  5.     </div>
  6. </body>
  8. <script type="text/javascript">
  10.     Vue.component("my-tag", {
  11.         template: "<p><button v-on:click='add'>数字增加</button></p>",
  12.         methods: {
  13.             add: function() {
  14.                 this.$emit("my-add-event", 10)
  15.             }
  16.         }
  17.     })
  19.     var vue = new Vue({
  20.         el: "#vueBox",
  21.         data: {
  22.             num: 1
  23.         },
  24.         methods: {
  25.             fatherAdd: function(val) {
  26.                 this.num = this.num +val;
  27.             }
  28.         }
  30.     })
  32. </script>

3.1.2 静态绑定
  1. <body>
  2.     <div id="vueBox">
  3.        <my-tag title="父组件传来的字面量"></my-tag>
  4.        <my-tag></my-tag>
  5.     </div>
  6. </body>
  8. <script type="text/javascript">
  10.     Vue.component("my-tag", {
  11.         template: "<p>{{msg}}--{{title}}</p>",
  12.         data: function(){
  13.             return {msg: '组件的内置数据'}
  14.         },
  15.         props: {
  16.             title: {
  17.                 type: String,
  18.                 default: "预设的值"
  19.             }
  20.         }
  22.     })
  24.     var vue = new Vue({
  25.         el: "#vueBox",
  26.         data: {
  27.             nums: [1,2,3,4]
  28.         }
  29.        
  30.     })
  32. </script>

注意：

  1. v-bind:props属性名:"" – 会自动转对应的数据类型
  2. props属性名:"" – 全局都为字符串String类型数据
  1. <body>
  2.     <div id="vueBox">
  3.        <my-tag msg1="200" :msg2="200"></my-tag>
  4.     </div>
  5. </body>
  7. <script type="text/javascript">
  9.     Vue.component("my-tag", {
  10.         template: "<p>{{typeof msg1}} -- {{typeof msg2 }}</p>",
  12.         props: ["msg1", "msg2"]
  14.     })
  16.     var vue = new Vue({
  17.         el: "#vueBox",
  18.         data: {
  19.         }
  21.     })
  23. </script>

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

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

  1. 在组件改变父组件属性的时候，必须使用this.$emit(“自定义事件名”) - 发出一个事件出去
  2. 并且在绑定函数时 @事件名=“父组件处理函数名” – 父组件对事件相应的处理
  1. <body>
  2.     <div id="vueBox">
  4.         <p>父组件num：{{num}}</p>
  5.         <my_component :num1="num" @add="add" @reduce="reduce" ></my_component>
  6.     </div>
  7. </body>
  9. <script type="text/javascript">
  11.     Vue.component("my_component", {
  13.         template: "<div><p>子组件num1：{{num1}}</p><button v-on:click='add'>增加</button><button v-on:click='reduce'>减少</button></div>",
  15.         props: ["num1"],
  16.         methods: {
  17.             add: function() {
  18.                 this.$emit("add");
  19.             },
  20.             reduce: function() {
  21.                 this.$emit("reduce");
  22.             }
  23.         }
  24.     })
  26.     var vue = new Vue({
  28.         el: "#vueBox",
  29.         data: {
  30.             num : 0
  31.         },
  32.         methods: {
  33.             add: function() {
  34.                 this.num++;
  35.             },
  36.             reduce: function() {
  37.                 this.num--;
  38.             }
  39.         }
  41.     })
  43. </script>

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

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

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

  1. <div id="vueBox">
  2.     <button v-on:click="destoryMsg">销魂两兄弟组件的信息交互</button>
  3.     <my-tag1></my-tag1>
  4.     <my-tag2></my-tag2>
  6. </div>
  7. </body>
  9. <script type="text/javascript">
  11.     // 信息中心 - 媒介
  12.     var msgCenter = new Vue();
  14.     Vue.component("my-tag1", {
  15.         template: "<div><p>tag1的num：{{num}}</p><button v-on:click='handle'>数字增加</button></div>",
  16.         data: function () {
  17.             return {
  18.                 num: 0
  19.             }
  20.         },
  21.         methods: {
  22.             handle: function () {
  23.                 // 向信息中心发送tag1-event事件
  24.                 msgCenter.$emit("tag1-event", 20)
  25.             }
  26.         },
  27.         mounted: function () {
  28.             // 信息中心在这里进行执行监听tag2-event事件
  29.             msgCenter.$on("tag2-event", (val) => {
  30.                 this.num = this.num + val;
  31.             })
  32.         }
  33.     })
  35.     Vue.component("my-tag2", {
  36.         template: "<div><p>tag2的num：{{num}}</p><button v-on:click='handle'>数字增加</button></div>",
  37.         data: function () {
  38.             return {
  39.                 num: 0
  40.             }
  41.         },
  42.         methods: {
  43.             handle: function () {
  44.                 msgCenter.$emit("tag2-event", 10)
  45.             }
  46.         },
  47.         mounted: function () {
  48.             msgCenter.$on("tag1-event", (val) => {
  49.                 this.num = this.num + val;
  50.             })
  51.         }
  52.     })
  54.     var vue = new Vue({
  55.         el: "#vueBox",
  56.         methods: {
  57.             destoryMsg: function () {
  58.                 msgCenter.$off("tag1-event");
  59.                 msgCenter.$off("tag2-event");
  60.             }
  61.         }
  62.     })
  64. </script>

4 组件的插槽 - slot

4.1 无名插槽

父组件向子组件传递内容

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

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Vue测试</title>
  4.     <script src="./node_modules/vue/dist/vue.js"></script>
  5.     <style>
  6.     </style>
  7. </head>
  8. <body>
  9.     <div id="vueBox">
  10.         <my-component><a>你很丑</a></my-component>
  11.         <my-component><a>太矮了</a></my-component>
  12.         <my-component></my-component>
  13.     </div>
  14. </body>
  16. <script type="text/javascript">
  18.    Vue.component("my-component",{
  19.        template: `
  20.             <div>
  21.                 <span style="color:red">错误提示：</span>
  22.                 <slot><a>默认内容</a></slot>
  23.             </div>`,
  24.    })
  26.     var vue = new Vue({
  27.         el: "#vueBox"
  28.     })
  30. </script>

4.2 有名插槽 - 意味一个组件可写多个插槽
4.2.1 不使用标签

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

  1. <body>
  2.     <div id="vueBox">
  3.        <my-component>
  4.             <span>填入无名插槽</span>
  5.             <span slot="name1">填入name1插槽</span>
  6.             <span slot="name2">填入name2无名插槽</span>
  7.        </my-component>
  8.     </div>
  9. </body>
  11. <script type="text/javascript">
  13.    Vue.component("my-component",{
  14.        template: `
  15.             <div>
  16.                 <span style="color:red">错误提示：</span><slot><a>默认内容无名插槽</a></slot>
  17.                 <br/>
  19.                 <span style="color:red">错误提示：</span><slot name="name1"></slot>
  20.                 <br/>
  22.                 <span style="color:red">错误提示：</span><slot name="name2"></slot>
  23.                 <br/>
  24.             </div>`,
  25.    })
  27.     var vue = new Vue({
  28.         el: "#vueBox"
  29.     })
  31. </script>

4.2.2 使用标签
  1. <body>
  2.     <div id="vueBox">
  3.        <my-component>
  4.            <template>
  5.                <span>填入无名插槽</span>
  6.            </template>
  7.            
  8.            <template slot="name1">
  9.                <span >填入name1插槽</span>
  10.            </template>
  11.            
  12.            <template slot="name2">
  13.                <span >填入name2无名插槽</span>
  14.            </template>
  15.        </my-component>
  16.     </div>
  17. </body>
  19. <script type="text/javascript">
  21.    Vue.component("my-component",{
  22.        template: `
  23.             <div>
  24.                 <span style="color:red">错误提示：</span><slot><a>默认内容无名插槽</a></slot>
  25.                 <br/>
  27.                 <span style="color:red">错误提示：</span><slot name="name1"></slot>
  28.                 <br/>
  30.                 <span style="color:red">错误提示：</span><slot name="name2"></slot>
  31.                 <br/>
  32.             </div>`,
  33.    })
  35.     var vue = new Vue({
  36.         el: "#vueBox"
  37.     })
  39. </script>

4.3 作用域插槽

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

下列示例的数据流动图片

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

  1. <body>
  2.     <div id="vueBox" >
  3.        <my-component v-bind:students="students">
  4.            <template slot-scope="args">
  5.                 <span v-if="args.msg.id == 2" style="color:red">{{args.msg.name}}</span>
  6.                 <span v-else>{{args.msg.name}}</span>
  7.            </template>
  9.        </my-component>
  10.     </div>
  11. </body>
  13. <script type="text/javascript">
  15.    Vue.component("my-component",{
  16.        template: `
  17.             <ul>
  18.                 <li v-for="student in students"><slot :msg="student"></slot></li>
  19.             </ul>
  20.        `,
  21.        props:["students"]
  23.    })
  25.     var vue = new Vue({
  26.         el: "#vueBox",
  27.         data: {
  28.             students: [{
  29.                 id: 1,
  30.                 name: 'lrc'
  31.             },{
  32.                 id: 2,
  33.                 name: 'lcj'
  34.             },{
  35.                 id: 3,
  36.                 name: 'yxx'
  37.             }]
  38.         }
  39.     })
  41. </script>

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/weixin_39651356/article/details/105770915

内容来源于网络，如有侵权，请联系作者删除！

vue组件Watch插槽组件间通信

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com