美文网首页
vue 数据传递

vue 数据传递

作者: 放不下FBX | 来源:发表于2018-10-23 21:07 被阅读0次

    1.声明渲染目标(容器)

    var app = new Vue({
    el: '#app',
    data: {
    message: 'Hello Vue!'
    },
    methods:{
    ....
    }
    })

    2.递归组件

    Vue.component('unique-name-of-my-component', {
    props:[' '],
    template:' ',
    methods:{
    函数
    }
    })

    3.父子组件间的通信

    可以给声明渲染目标中写定所需所有函数,在递归组件中调用。

    Vue.component('step-item', {
    props:['step'],
    template:' <div v-bind:class="step.class" ><i>{{step.text }}</i><input v-bind:type="step.type" v-on:click="changeColor($event)" v-bind:value="step.value"></div>',
    methods:{
    changeColor:funciton(event){
    var value = event.target.valur; //获取当前的dom元素值
    step.btnhit(this.step,this.step.ref,value); //this.step数据源,this.step.ref数据中的唯一值(key)
    }
    }
    });
    var step = new Vue({
    el:'#fromBox',
    data:{
    class:"juget",
    text:"内容",
    type:"text",
    value:""
    },
    methods:{
    btnhit:function(data,key,value){
    data.class = "show";
    data.value="改变";
    data.text = "i标签",
    }
    }
    });

    相关文章

      网友评论

          本文标题:vue 数据传递

          本文链接:https://www.haomeiwen.com/subject/uxkzzftx.html