vue-组件

最新推荐文章于 2024-02-08 10:28:07 发布

guanqingchao

最新推荐文章于 2024-02-08 10:28:07 发布

阅读量231

点赞数

分类专栏： vue 文章标签： vue组件

本文链接：https://blog.csdn.net/guanqingchao/article/details/80541381

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

vue组件全局注册：

<body>
    <div id='app'>
        <my-component></my-component>
    </div>
    <script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
    <script>
       Vue.component('my-component',{
        template:'<div>我是全局注册</div>'
       })
       var app = new Vue({
           el:'#app',
       })
    </script>
</body>

局部注册：

    <div id='app'>
        <my-component></my-component>
    </div>
    <script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
    <script>
        var child = {
            template:'<div>我是局部注册</div>'，
            data:function(){
                return {
                    data:'js'}}
        }
        var app = new Vue({
           el:'#app',
           components:{
               'my-component':child,
           }
       })
    </script>
</body>

组件和vue实例一样，同样具有computed、methods、data等，data不同之处是函数。
组件之间数据传递：
父->子：props
子->父： $emit、$ on
1、父组件向子组件传递参数和数据：props可以使字符串数组或者对象

    <div id='app'>
        <my-component warn-message="我是父组件的消息"></my-component>
    </div>
    <script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
    <script>
       Vue.component('my-component',{
        props:['warnMessage'],
        template:'<div>{{warnMessage}}</div>'
       })
        var app = new Vue({
           el:'#app',
       })
    </script>

props可以传递动态绑定的值

    <div id='app'>
        <input type="text" v-model="parentMessage">
        <my-component :message="parentMessage"></my-component>
    </div>
    <script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
    <script>
        var child = {
            props:['message'],
            template:'<div>{{message}}</div>'
        }
        var app = new Vue({
           el:'#app',
           components:{
               'my-component':child,
           },
           data:{
               parentMessage:'',
           }
       })

修改props：
1、父组件传递的props，子组件在自己的作用域内随意修改props
在子组件data中声明一个新的变量newdata，只需要维护newdata即可。

    <div id='app'>
        <my-component :init-data="1"></my-component>
    </div>
    <script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
    <script>
       Vue.component('my-component',{
        props:['initData'],
        template:'<div>{{newdata}}</div>',
        data:function(){
            return{
                newdata:this.initData
            }
        }
       })
        var app = new Vue({
           el:'#app',
       })

2、props作为需要转变的原始值：此时可以用计算属性来解决

    <div id='app'>
        <my-component :width="100"></my-component>
    </div>
    <script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
    <script>
       Vue.component('my-component',{
        props:['width'],
        template:'<div :style="style">组件内容</div>',
        computed:{
            style:function(){
                return{
                    width:this.width+'px'
                }
            }
        }
       })
        var app = new Vue({
           el:'#app',

       })

props验证：对象形式

props：{
    propsA：Number,
    propsB:[String,Number],
    propsC:{
        type:Boolean,
        default:true},
    propsD:{
        type:Number,
        required:true},
    propsE:{
        type:Array,
        default:function(){
            return [];
            }
         },
     propsF:{
         validator:function(val){
             return val > 10;
             }
           }
     }

子组件向父组件传递数据：
子组件用 $emit()触发事件，父组件用$ on()来监听子组件事件

    <div id='app'>
        <p>总数:{{total}}</p>
        <num @increase='getTotal' @reduce='getTotal'></num>
    </div>
    <script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
    <script>
       Vue.component('num',{
           template:'<div><button @click="handincrease">+</button><button @click="handreduce">-</button></div>',
            data:function(){
                return{
                    counter:0
                }
            },
            methods:{
                handincrease(){
                    this.counter++;
                    this.$emit('increase',this.counter);

                },
                handreduce(){
                    this.counter--;
                    this.$emit('reduce',this.counter);
                }
            }
       })
        var app = new Vue({
           el:'#app',
           data:{
               total:0
           },
           methods:{
            getTotal(total){
                this.total = total
               }
           }

       })

vue-bus:父子、兄弟、跨级传递

var bus = new Vue();
        Vue.component('component-a',{
           template:'<div><button @click="handleEvent">bus传递事件</button</div>',
            methods:{
                handleEvent(){
                    bus.$emit('on-message','来自子组件的消息')
                }
            }
       })
        var app = new Vue({
            el:'#app',
            data:{
                message:''
            },
            mounted(){
                var _this = this;
                bus.$on('on-message',function(mes){
                    _this.message = mes;
                })
            }

       })

guanqingchao

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue-组件

vue组件全局注册：&lt;body&gt; &lt;div id='app'&gt; &lt;my-component&gt;&lt;/my-component&gt; &lt;/div&gt; &lt;script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"&gt;&lt;/script&
复制链接

扫一扫