component传值问题

原创 2018年04月16日 19:13:59

Vue.component('xxx',{

template:'<div>xxxxxxxxx</div>'  //必须有跟元素,

data:function(){

return:{

xxx:xxx,

}

},

methods:{

xxx:function(){

xxx

}

}

})

父子传值

<my-component message="hello"></my-component>

  1. Vue.component('my-component',{  
  2.              props:['message'],  
  3.             template:'<div class="tem1">{{message}}</div>'  
  4.         });
  5. 或者

'aaa':{
    template:'#ccc-tp2',
    props:['abc'],
    data:function(){
        return {
            num:15,
            liked:false
        }
    },
<aaa abc="哈哈哈哈或或或"></aaa>
<template id="ccc-tp2">
    <div>
        <button :class="{liked2:liked}"   @click="on_click">啊啊啊啊啊啊啊啊啊啊啊啊啊{{num}}</button>
    </div>
</template>

子父传值

<father></father>


Vue.component('father',funciton{

template:' <div>

<son @xxxx = "abcd"></son>

</div>',

methods:function(){

abcd:function(data){

//data就是子元素的方法包含传递过来的参数

如子元素中的  data.name

}

}

})

Vue.component('son',funciton{

template:' <div @click="chuanzhi()">xxxx</div>',

methods:{

chuanzhi:function(){

    this.$emit('xxxx',{name:this.name})  //xxxx随意起名 与父元素调用相同即可  {里面写要传的参数}

}

},

data:function(){

return {

name:xxxx

}

}

})

兄弟组件传值


var Event =  new Vue()

Vue.component('huahua',{
    template:'<div>花花说:<input @keyup="change" type="text" v-model="said">{{said}}</div>',
    data:function () {
        return {
            said:""
        }
    },
    methods:{
        change:function () {
            Event.$emit('content',this.said)
        }
    }
})
Vue.component('i-said',{
    template:'<div>我说:{{i_said}}</div>',
    data:function () {
        return {
            i_said:""
        }
    },
    mounted:function () {
        //var _this = this
        // Event.$on('content',function (data) {
        //     _this.i_said = data
        // })
        Event.$on('content',(data) => { //ES6写法,让THIS指向组件内或用注释部分修改也可以
            this.i_said = data
        })
    }
})



var app = new Vue({
    el:"#app",

})


component Intent App之间传值(一) 了解

今天来学习下Intent的component的用法 Intent是在作为Activity之间传递数据的组件,通过intent将数据封装起来,传递到你需要传递的activity中,再在目标Acti...
  • a2241076850
  • a2241076850
  • 2016-12-27 10:51:36
  • 718

关于c++传值交换的问题 word

  • 2009年04月10日 17:14
  • 51KB
  • 下载

angularjs的directive和component的参数传递问题小结(转)

directive 参数传递和绑定方式: scope定义,如: scope: { data: "=" }, 参数调用方式:在定...
  • heting717
  • heting717
  • 2017-12-13 15:46:12
  • 83

Form间传值的问题

  • 2009年03月23日 13:12
  • 37KB
  • 下载

zk组件详解

  • 2011年12月17日 16:00
  • 4.57MB
  • 下载

Ember component

component顾名思义,是ember中的组件。其特性为可以重复利用。component也是由两部分组成,一个handlebars的模板文件以及一个js文件。其中模板文件控制如何渲染,js文件控制它...
  • BerlinLove
  • BerlinLove
  • 2017-02-20 15:10:39
  • 583

两个窗口传值

  • 2013年06月03日 18:38
  • 43KB
  • 下载

C语言 链表

  • 2011年09月15日 09:28
  • 4KB
  • 下载

Angular4_组件之间传值

子组件html a *ngIf="currentNodeStatus !== '0'" (click)="navigateDetail(deliveryId,currentNodeStatu...
  • qq_36279445
  • qq_36279445
  • 2018-01-10 09:32:35
  • 561

android实现activity直接的传值问题

  • 2015年12月28日 16:23
  • 1.43MB
  • 下载
收藏助手
不良信息举报
您举报文章:component传值问题
举报原因:
原因补充:

(最多只允许输入30个字)