Vuejs的指令及组件用法总结

            

                年龄：
                
            
            
        new Vue({
            el: '#app',data: {
                person:{
                    name:'',age:'',},list:[{
                    name:'章三',age:23
                }]
            },methods:{
                add:function(){
                    this.list.push(this.person);
                    this.person = {name:'',age:''};
                },deleteItem:function(index){
                    // 删除一个数组元素
                    this.list.splice(index,1);
                },marry:function(){
                    alert("不好意思，你没有女朋友结不了婚");
                }
            },created:function(){
            }
        })

组件 (Component) 是 Vue.js 最强大的功能之一，使用组件化方式开发，可以封装可重用的代码，减少重复劳动

接下来，我们来注册一个组件 语法Vue.component(tagName,options)

注册组件

        Vue.component('component-a',{
          template: '
component-a
'
        })

component-a是注册的组件标签，下面就可以使用这个组件了

        
// 创建根实例

new Vue({

el: '#app'

})

最后，渲染为：

component-a!

通过Vue.component方式注册的组件是一个全局组件 ，我们还可以创建局部组件，通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件

var Child = {
          template: '
A custom component!
'
        }
        var vm = new Vue({
            el: '#app',components:{
                'component-a':Child
            }
        })

局部注册的组件

组件 A 在它的模板中使用了组件 B，它们之间必然需要相互通信，父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件 我们先来看一张图

从图上可以很清晰的看到，父子组件通信主要是使用prop和自定义事件，父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。 父子组件的关系可以总结为 prop 向下传递，事件向上传递。

来看个示例：

                接收到的子组件回复消息：{{replyMsg}}
             
             
        
        
Vue.component('component-a',{

template: '#componentA',props:['msg'],data:function(){

return{

msgfilter:'处理后的消息-》'+this.msg

}

},methods:{

reply:function(){

this.$emit('reply','子组件消息')

}

}

})

var vm = new Vue({

el: '#app',data:{

msg:'父组件消息',replyMsg:''

},methods:{

replay:function(msg){

this.replyMsg = msg

}

}

})

需要注意的是，组件里面的data必须是一个函数，通过return形式返回

1.父组件下发数据到子组件

在组件中通过v-bind添加一个参数将数据传递到子组件里，然后使用props接收传递过来的参数props:['msg'] 渲染结果：

2.子组件通过事件给父组件发送消息 子组件通过$emit触发事件

this.$emit('reply','子组件消息')

在组件标签中通过v-on进行监听

监听到事件后触发reply函数，接收到子组件发送的消息

replay:function(msg){
                    this.replyMsg = msg
                }

渲染结果：

        接收到的子组件回复消息：子组件消息
    
 
    

        
我是组件a，接收到父类的消息是：处理后的消息-》父组件消息
 
        
回复
    

以上可以看到我们是通过字符串数组来定义prop的，除此之外我们还可以用对象的形式来定义prop，用来为组件的 prop 指定验证规则， type的值可以是这些：String Number Boolean Function Object Array Symbol,例如：

      props: {
        name: String,showDialog: {
            type: Boolean,default: false
        }
      }

        

        

        
    
    
Vue.component('v-dialog',{

template: '#dialog',// props:['msg','type','showDialog'],props:{

msg:String,type:Number,showDialog:{

type: Boolean,default: false

}

},data:function(){

return {

}

},methods:{

close:function(){

// 触发父类关闭窗口事件

this.$emit('close-dialog');

},login:function(){

console.log("登录跳转中...");

this.$emit('close-dialog');

}

}

})

// vue实例

var vm = new Vue({

el: '#app',data: {

amount:'',msg:'',showDialog:false,type:1,// 提示类型  1单按钮提示框  2双按钮提示框

isLogin:true

},methods:{

login:function(){

this.isLogin = !this.isLogin;

},submit:function(){

//弹出对话框组件

if(!this.isLogin){//未登录

this.msg = "请先去登录再领取金额";

this.showDialog = !this.showDialog;

this.type = 2;

return;

}

if(this.amount){

if(this.amount<1 || this.amount>1000){

this.msg = "输入金额不能低于1元大于1000";

this.showDialog = !this.showDialog;

this.type = 1;

}else{

this.msg = "领取成功，请在账户中心查看";

this.showDialog = !this.showDialog;

this.type = 1;

}

}else{

this.msg = "领取金额不能为空";

this.showDialog = !this.showDialog;

this.type = 1;

}

},closeDialog:function(){//关闭对话框

this.showDialog = false;

}

}

})

<h3 id="总结">总结

以上简单介绍了vuejs的MVVM模型和它的双向绑定机制，然后以一个helloworld示例开始了vuejs的使用， 之后又了解和熟悉了几个比较常用的vue指令，综合以上，构建了一个简单的示例,最后讲了vue中组件的一些 用法，父子组件是如何进行通信的，结合组件用法，实现了一个对话框组件。

作者：fozero 声明：原创文章，转载请注明出处，谢谢！ 标签：vuejs

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!