资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/vue学习笔记（三）

vue学习笔记（三）

fsmStudy / 2108人阅读

摘要：直接创建组件使用标签名组件模板，根据组件构造器来创建组件。相应的，实例也被称为父组件。而且不允许子组件直接修改父组件中的数据，强制修改会报错。

一、组件 （一）什么是组件

组件（Component）是 Vue.js最强大的功能之一。组件可以扩展 HTML元素，封装可重用的代码组件是自定义元素（对象）。

（二）创建组件的两种方式

官方推荐组件标签名是使用-连接的组合词，例如：。

1、使用构造器创建组件

使用这种方式创建组件首先需要使用Vue.extend()创建一个组件构造器，然后使用Vue.component(标签名,组件构造器)，根据组件构造器来创建组件。

//1.创建构造器
var MyComponent=Vue.extend({
    template:"
Hello World
"
});
//2.创建组件
Vue.component("my-hello",MyComponent);

//3.使用组件

这种创建组件的方式比较麻烦，使用的较少。

2、直接创建组件

使用Vue.component(标签名,组件模板)，根据组件构造器来创建组件。

//1.创建组件
 Vue.component("my-world", {
    template: "
hello vue.js
"
 });
 
//2.使用组件
（三）组件的分类

组件分为全局组件和局部组件。

1、全局组件

使用Vue.component()创建的组件都是全局组件。这样的组件在任何组件内都能使用。上面我们创建就是全局组件。

2、局部组件

局部组件一般都是定义在实例的选项中，称为实例的子组件。相应的，实例也被称为父组件。

//1.定义组件
 new Vue({
    el: "#app",
    components: {
        dawei: {
            template: "
my name is dawei
"
        }
    }
});
//2.使用组件
（四）引用模板

很多时候我们的template模板中需要存放很多标签内容，这样的话写起来会很麻烦。这时候我们可以使用template标签。

用法如下：


    
    new Vue({
        el: "#app",
        components: {
            "my-dawei": {
                template: "#wbs",  //选择template标签
                data() {
                    return {
                        msg: "vue.js",
                        arr: ["a", "b", "c", "d"]
                    }
                }
            }
        }
    });

这里涉及到的几个知识点得着重提一下：

在template模板中，所有的元素必须放置在一个根元素中，要不然会报错。例子中我们将元素放置在了

标签中。

组件中的data选项必须是一个函数类型，使用return返回所有的数据。

（五）动态组件

很多时候项目中需要在某一个地方动态的使用不同的组件，这时候就需要使用动态组件。
动态组件的使用需要绑定is属性：

简单示例：

//点击按钮显示不同的组件
 

    
    

      //传入flag



new Vue({
    el: "#app",
    data: {
        flag: "my-a"   //给flag赋值
    },
    components: {
        "my-a": {
            template: "
我是a组件
",
        },
        "my-b": {
            template: "
我是b组件
"
        }
    }
});
（六）keep-alive组件

使用keep-alive组件缓存非活动组件，可以保留状态，避免重新渲染，默认每次都会销毁非活动组件并重新创建。

使用范例：


     


 

    
    
    
        
    
 

 
 new Vue({
    el: "#app",
    data: {
        flag: "my-x"
    },
    components: {
        "my-x": {
            template: "
{{x}}
",
            data() {
                return {
                    x: Math.random()
                }
            }
        },
        "my-y": {
            template: "
{{y}}
",
            data() {
                return {
                    y: Math.random()
                }
            }
        }
    }
 });

这样的话，第一次产生的随机数就会被缓存，再次切换的时候也不会发生改变。

二、 组件间数据传递 （一）父子组件

在一个组件内部定义另一个组件，那么这对组件称为父子组件。子组件只能在父组件内部使用。默认情况下，每个组件实例的作用域是独立的，子组件无法访问父组件中的数据，同样，父组件也无法访问子组件中的数据。
（二）组件间数据传递（通信） 1、子组件访问父组件的数据

步骤：

a、调用子组件时，绑定想要获取的父组件中的数据

b、在子组件内部，使用props选项声明获取的数据，即接收来自父组件的数据

改进上面的例子：
2、父组件访问子组件的数据

步骤：

a 在子组件中使用vm.$emit(事件名,数据)触发一个自定义事件，将数据发送给父组件，事件名自定义

b 父组件在使用子组件的地方监听子组件触发的事件，并在父组件中定义方法，用来获取数据

//子组件‘my-b’内部
methods:{
    send(){//使用$emit()触发一个事件，发送数据，this指当前子组件实例
        this.$emit("e-world", this.senddata);         
    }
}

//在调用子组件的地方监听子组件触发的事件，调用自己的方法获取数据
   


 methods: {
    getData(data) {  //参数是子组件传递过来的数据
        this.revicedata = data;
    }
 }
3、单向数据流

props是单向数据绑定的，当父组件数据发生变化时，将传递给子组件，但是不会反过来。而且不允许子组件直接修改父组件中的数据，强制修改会报错。

解决方案：

如果子组件想把它作为局部数据来使用，可以将数据存入另一个变量中再操作，不影响父组件中的数据

如果子组件想修改数据并且同步更新到父组件，两个方法：

使用.sync显式地触发一个更新事件（1.0版本中支持，2.0版本中不支持，2.3版本又开始支持）

//使用.sync
  
 
//子组件修改父组件传入的值name，触发update更新事件
this.$emit("update:name", "vuejs");

可以将父组件中的数据包装成对象，然后在子组件中修改对象的属性(因为对象是引用类型，指向同一个内存空间)，推荐使用这种方式。

 data() {
    return { //将要传递的数据放入message对象中
        message: {
            hello: "子组件b你好，我是父组件a"
        }
    }
}

   //传递这个对象给子组件

 methods: {   //在子组件内部修改这个值，这样就会同步传递给父组件。
    edit() {
        this.message.hello = "hahahahh";
    }
 }
4. 非父子组件间的通信

非父子组件间的通信，可以通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现非父子组件间的通信。

var Event = new Vue();    //空vue实例

 methods: {  
    send() {  //触发emit事件
        Event.$emit("hello", this.asmsg);
    }
 }
 
 mounted() {    //在子组件的钩子函数中监听该事件
    Event.$on("hello", data => {   //获取值
        this.bsmsg = data;  
    })
 }
三、slot内容分发

用来获取组件中的原内容

var vm = new Vue({
    el: "#app",
    components: {
        "my-hello": {
            template: "#hello"
        }
    }
});



    hello vue.js

如果组件标签中没有内容就会显示slot中的内容，这也就是所谓的单个插槽。

还可以对显示的内容进行分组，这就是具名插槽，可以操作标签组中的内容：


    
        
    
            
  • aaa
    • 
            
  • bbb
    • 
            
  • ccc
    • 
        

        
    
            
  1. 111
    2. 
            
  2. 222
    3. 
            
  3. 333
    4.

这样，就可以对组件中的内容实时操作。

云服务器 GPU云服务器 vue3 学习笔记 (五)——vue3 学习笔记 学习笔记一 基础学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89285.html

相关文章

  • Vue 笔记三：Vue2.0与1.0的区别

    摘要：升级的区别与的断层式升级不同，延续了自己的风格。在命名方式和上有一些区别，掌握它们是你升级整个项目的关键。以下内容都是来源于个人项目的一些经验之谈，并非系统性的阐述。总目录前端经验收集器转载自个人建了前端学习群，旨在一起学习前端。 升级的区别 与angular的断层式升级不同，vue延续了自己的风格。在命名方式和API上有一些区别，掌握它们是你升级整个项目的关键。以下内容都是来源于个人...

    Big_fat_cat 评论0 收藏0

  • vue学习笔记（三）

    摘要：直接创建组件使用标签名组件模板，根据组件构造器来创建组件。相应的，实例也被称为父组件。而且不允许子组件直接修改父组件中的数据，强制修改会报错。 一、组件 （一）什么是组件 组件（Component）是 Vue.js最强大的功能之一。组件可以扩展 HTML元素，封装可重用的代码组件是自定义元素（对象）。 （二）创建组件的两种方式 官方推荐组件标签名是使用-连接的组合词，例如：。 1、使用...

    zsirfs 评论0 收藏0

  • Vue.js学习系列二 —— vuex学习实践笔记（附DEMO）

    摘要：有兴趣的同学可以查看之前发布的文章学习系列一学习实践笔记附学习系列二学习实践笔记附学习系列三和网络传输相关知识的学习实践学习系列四打包工具的使用学习系列五从来聊聊学习系列项目地址项目暂时有点乱，之后会进行整理优化。 上次学习了vue-router的使用，让我能够在各个页面间切换，将页面搭建了起来。这次则要学习vue的状态管理模式——vuex。它类似于redux来应用的全局状态。 注：本...

    DobbyKim 评论0 收藏0

  • vue学习笔记（四）

    摘要：提供了两种向组件传递参数的方式。子路由项路径不要使用开头，以开头的嵌套路径会被当作根路径。路由实例的方法这里学习两个路由实例的方法和。实际上，是通过不同的将这些资源加载后打包，然后输出打包后文件。 一、vue-router 1、简介 我们经常使用vue开发单页面应用程序（SPA）。在开发SPA过程中，路由是必不可少的部分，vue的官方推荐是vue-router。单页面应用程序看起来好像...

    frank_fun 评论0 收藏0

  • vue学习笔记（四）

    摘要：提供了两种向组件传递参数的方式。子路由项路径不要使用开头，以开头的嵌套路径会被当作根路径。路由实例的方法这里学习两个路由实例的方法和。实际上，是通过不同的将这些资源加载后打包，然后输出打包后文件。 一、vue-router 1、简介 我们经常使用vue开发单页面应用程序（SPA）。在开发SPA过程中，路由是必不可少的部分，vue的官方推荐是vue-router。单页面应用程序看起来好像...

    lwx12525 评论0 收藏0

发表评论

登陆后可评论

0条评论

fsmStudy

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<