Vue组件(component、props)、axios跨域请求

最新推荐文章于 2024-05-17 08:00:00 发布

618GLOAL_COOK2237

最新推荐文章于 2024-05-17 08:00:00 发布

阅读量367

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/GLOAL_COOK/article/details/113846447

版权

一、组件

1.1组件入门、组件复用、注册组件

在这里插入图片描述
在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部
导航。
但是如果每个页面都独自开发，这无疑增加了开发的成本。所以会把页面的不同部分拆分成独立的组件，然后在不同
页面就可以共享这些组件，避免重复开发。在这里插入图片描述

组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。 data的定义方式比较特殊，必须是一个函数。

在这里插入图片描述
组件的data属性必须是函数！
因此，对于一些并不频繁使用的组件，会采用局部注册。
下面代码演示全局注册和局部注册、组件复用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue11测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app11">
    <!--使用定义好的组件-->
    <counter1></counter1>
    <counter1></counter1>
    <counter1></counter1>

</div>
<script type="text/javascript">
    //1.定义组件
    const counter2={
    
        template:"<button @click='num++'>你点击了{
    {num}}次，我记住了</button>",
        data(){
    
            return {
    num:0}
        }
    };

    //2.全局注册组件；参数1：组件名称，参数2：组件(con couter定义的)
    //Vue.component("counter1",counter2);
    var app1=new Vue({
    
        el:"#app11",   //el即element，要渲染的页面元素

        //2.局部注册组件
        components:{
    
            counter1:counter2
        }
    })
</script>
</body>
</html>

效果：
在这里插入图片描述

1.2父组件先子组件通信

在这里插入图片描述

上面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title

最低0.47元/天解锁文章

618GLOAL_COOK2237

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件(component、props)、axios跨域请求

一、组件1.1组件入门、组件复用、注册组件在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。但是如果每个页面都独自开发，这无疑增加了开发的成本。所以会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。但是组件渲染需要html模板，所以增加了
复制链接

扫一扫

专栏目录