前端案例-31 Vue组件案例

最新推荐文章于 2024-03-19 17:36:41 发布

VIP文章 KathyLJQ

最新推荐文章于 2024-03-19 17:36:41 发布

阅读量367

点赞数

分类专栏：前端案例

本文链接：https://blog.csdn.net/KathyLJQ/article/details/118003868

版权

全局组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <button-counter></button-counter>
        <!-- <HelloWorld></HelloWorld> -->
        <hello-world></hello-world>
    </div>
</body>
<script>
//组件名单词之间用-链接，或者首字母大写ButtonCounter
//注：使用首字母大写的方式创建的组件必须放在template中使用，不能直接写道body中

Vue.component('hello-world',{
    
    data:function(){
    
        return{
    
            msg:'Hello'
        }
    },
    template:'<div>{
    {msg}}</div>'
})

Vue.component('HelloWorld',{
    
    data:function(){
    
        return{
    
            msg:'Hello'
        }
    },
    template:'<div>{
    {msg}}</div>'
})
Vue.component('button-counter',{
    
    //组件中的data必须是函数
    data:function(){
    
        return {
    
            count:0
        }
    },
    //模板中必须有单个根元素，不能是多个根节点并列
    template:'<div><HelloWorld></HelloWorld><button @click="count++">点击了{
    {count}}次</button><button @click="count" v-cloak>点击了测试次</button></div>'
    // template:'<button @click="count" v-cloak>点击了{
    {count}}次</button>'
})


var v = new Vue({
    
    el:'#app',
    //Vue实例中的data是一个对象
    data:{
    
    }
})
</script>
</html>

局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='js/vue.min.js'></script>
</head>
<body>
    <div id="app">
        <!-- <Hello></Hello> -->
        <hello-world></hello-world>
        <!-- <HelloWorld></HelloWorld> -->

    </div>
    
</body>
<script>
    // 局部组件注册
    // 注：局部组件只能在注册它的父组件中使用
    var Hello={
    
        data:function(){
    
            return {
    
                msg:'hello'
            }
        },
        template:'<div>{
    {msg}}</div>'       
    }

    var HelloWorld={
    
        data:function(){
    
            return {
    
                msg:'hello,world'
            }
        },
        template:'<div>{
    {msg}}</div>'      
    }

    var v = new Vue({
    
        el:'#app',
        data:{
    
        },
        components:{
    
            // 'hello':Hello
            'hello-world':HelloWorld
        }
    })
</script>
</html>

组件间数据交互子组件-父组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='js/vue.min.js'>
    </script>
</head>
<body>
    <div id="app">
        <div :style='{
      fontSize:fontSize+"px"}'>{
  {parr[0]}}</div>
        <!-- <item-menu :arr='parr' @enlarge-text='handle'></item-menu> -->
        <!-- 子组件向父组件传参 -->
        <item-menu :arr='parr' @enlarge-text='handle($event)'></item-menu>
    </div>
</body>
<script>
    Vue.component('item-menu',{
    
        props:['arr'],
        template: 
        `<ul>
        <li :key='index' v-for='(item,index) in arr'>{
     {item}}
        </li>
        <button @click='arr.push("banana")'>点击</button>
        <button @click='$emit("enlarge-text",5)'>扩大</button>
        <button @click='$emit("enlarge-text",1)'>扩大</button>
        </ul>`
        // 子组件向父组件传参
    })

    var v = new Vue({
    
        el:'#app',
        data:{
    
            parr:['apple','orange'],
            fontSize:10
        },
        methods:{
    
            handle:function(step){
    
                this.fontSize += step
            }
        }
    })
</script>
</html>

组件间数据交互父组件-子组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='js/vue.min.js'></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model='pmsg'>
        <div pnum='12'></div>
        <!-- 1.在props中使用驼峰形式，模板中需要使用短横线的形式 -->
        <menu-item :m-s='pmsg' :pnum='12' :pboo='true' :fruits='parr' :obj='pobj'></menu-item>

    </div>
    
</body>
<script>
    // 父组件向子组件传递
    // 注：
    // 1.在props中使用驼峰形式，模板中需要使用短横线的形式 
    // 2.字符串形式的模板中没有这个限制
    Vue.component('menu-item',{
    
        props:</

最低0.47元/天解锁文章

KathyLJQ

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端案例-31 Vue组件案例

插槽<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&.
复制链接

扫一扫