vue入门（二）

最新推荐文章于 2022-05-22 00:11:15 发布

xingxing12323

最新推荐文章于 2022-05-22 00:11:15 发布

阅读量157

点赞数

分类专栏： # vue

本文链接：https://blog.csdn.net/xingxing12323/article/details/104817492

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

vue中的组件

vue中的组件分为全局组件和局部组件

定义全局组件并且用用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--
        组件中默认的名称都小写，
        使用大写的时候，将转为小写并且在前面添加-
    -->
    <count-num></count-num><br>
    <count-num></count-num><br>
    <count-num></count-num>
</div>

</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    //定义全局组件
    //全局组件绑定在Vue类中，全局可用
    Vue.component("countNum",{
        //模板对象定义在组件里，只有一个根元素
        template:'<button v-on:click="count++">点击次数{{count}}</button>',
        //组件属性定义成方法,并且返回一个对象:
        // 保证组件实例之间不公用属性值
        data(){
            return{
                count: 0
            }
        }
    })
    const app = new Vue({
        el: "#app",
    })
</script>
</html>

定义局部vue组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--
            组件中默认的名称都小写，
            使用大写的时候，将转为小写并且在前面添加-
        -->
        <counter></counter>
    </div>

</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    
    //定义局部vue组件
    //局部组件绑定到具体的vue实例中，只有注册的可用
    const counter = {
        //模板对象定义在组件里，只有一个根元素
        template:'<button v-on:click="count++">局部组件点击次数{{count}}</button>',
        //组件属性定义成方法,并且返回一个对象:
        // 保证组件实例之间不公用属性值
        data(){
            return{
                count: 0
            }
        }
    }
    const app = new Vue({
        el: "#app",
        components:{
            //可以简写为counter,表示属性名和实例名都为counter
            counter: counter
        }
    })
</script>
</html>

父子组件之间进行传值

定义子组件

 Vue.component("myName",{
        template:'<h1>我的名字是：{{title}}</h1>',
        props:['title'],//组件内用props父模板标签内传递的属性值
        data(){
            return{
                count: 0
            }
        }
    })

在父模板的调用标签内传值

<!--静态传值，自定义组件标签上传递属性-->
    <my-name title="微茫火种"></my-name>
    <!--动态传值-->
    <my-name :title="name"></my-name>

网整页面的形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--静态传值，自定义组件标签上传递属性-->
    <my-name title="微茫火种"></my-name>
    <!--动态传值-->
    <my-name :title="name"></my-name>
</div>

</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    Vue.component("myName",{
        template:'<h1>我的名字是：{{title}}</h1>',
        props:['title'],//组件内用props 接收响应属性
        data(){
            return{
                count: 0
            }
        }
    })
    const app = new Vue({
        el: "#app",
        data:{
            name: "幽林洞箫"
        }
    })
</script>
</html>

props组件的验证（方便开发测试页面无效果）

 props:{
            title: {
                //type 类型：String Number Boolean Array Object Function Symbol
                type: Number,
                default: 0,
                required:true
            }
        },

在这里插入图片描述

子向父组件传值
子组件向父组件传值首先要能控制父组件的方法
1.子组件控制父组件的方法

在父组件中定义方法

const app = new Vue({
    el: "#app",
    data:{
        num: 10
    },
    methods:{
        incr(){
            this.num++
        },
        decr(){
            this.num--
        }
    }
})

调用子组件的时候以自定义事件的方式传递

<div id="app">
    <h2>num:{{num}}</h2>
    <counter @inc="incr" @dec="decr"></counter>
</div>

定义子组件

Vue.component("counter",{

    template:`<h1>
                   <button @click="plus">加</button>
                   <button @click="reduce">减</button> <br>
              </h1>`,
    methods:{
        plus(){
            this.$emit("inc")
        },
        reduce(){
            this.$emit("dec")
        },
    }
})

到此子组件已经可以控制父组件中的方法了

通过子组件在调用父组件方法互相调用的时候传递参数（类似于早期的jsonp方式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>num:{{num}}</h2>
    <counter @inc="incr" @dec="decr"></counter>
</div>

</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    Vue.component("counter",{
        //在模板中调用自己方法
        template:`<h1>
                       <button @click="plus">加</button>
                       <button @click="reduce">减</button> <br>
                  </h1>`,
        data(){
            return{
                count: 100
            }
        },
        methods:{
            plus(){
                this.$emit("inc",this.count)//通过$emit调用父组件的方法，中间参数是自定义事件名称
            },
            reduce(){
                this.$emit("dec")
            },
        }
    })
    const app = new Vue({
        el: "#app",
        data:{
            num: 10
        },
        methods:{
            incr(count){
                this.num=this.num+count;
            },
            decr(){
                this.num--
            }
        }
    })
</script>
</html>

在这里插入图片描述

xingxing12323

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue入门（二）

vue中的组件vue中的组件分为全局组件和局部组件定义全局组件并且用用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><d...
复制链接

扫一扫