zoukankan      html  css  js  c++  java
  • vue 父子组件传参

    父向子组件传参

      例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与componentA对于它来说是一样的,不好区分,所以使用小写-小写这种写法)。而子组件componetA中,声明props参数’msgfromfa’之后,就可以收到父向子组件传的参数了。例子中将msgfromfa显示在<p>标签中。
    App.vue中

    1
    1<component-a msgfromfa="(Just Say U Love Me)"></component-a>

      

    1
    2
    3
    4
    5
    6
    7
    8
    mport componentA from './components/componentA'
    export default {
    new Vue({
    components: {
    componentA
    }
    })
    }

      


    componentA.vue中 

    1
    <p>{{ msgfromfa }}</p>

      

    1
    2
    3
    export default {
    props: ['msgfromfa']
    }

      

    父向子组件传参(.$broadcast)

      用法:vm.$broadcast( event, […args] )广播事件,通知给当前实例的全部后代。因为后代有多个枝杈,事件将沿着各“路径”通知。
      例子:父组件App.vue中<input>绑定了键盘事件,回车触发addNew方法,广播事件”onAddnew”,并传参this.items。子组件componentA中,注册”onAddnew”事件,打印收到的参数items。
    App.vue中

    <div id="app">
    <input v-model="newItem" @keyup.enter="addNew"/>
    </div>
    export default {
    new Vue({
    methods: {
    addNew: function() {
    this.$broadcast('onAddnew', this.items)
    }
    }
    })
    }



    componentA.vue中

    1
    2
    3
    4
    5
    6
    7
    8
    import componentA from './components/componentA'
    export default {
    events: {
    'onAddnew': function(items){
    console.log(items)
    }
    }
    }

      

    子组件向父传参(.$emit)

      用法:vm.$emit( event, […args] ),触发当前实例上的事件。附加参数都会传给监听器回调。
      例子:App.vue中component-a绑定了自定义事件”child-say”。子组件componentA中,单击按钮后触发”child-say”事件,并传参msg给父组件。父组件中listenToMyBoy方法把msg赋值给childWords,显示在<p>标签中。
    App.vue中

    <p>Do you like me? {{childWords}}</p>
    <component-a msgfromfa="(Just Say U Love Me)" v-on:child-say="listenToMyBoy"></component-a>
    import componentA from './components/componentA'
    export default {
    new Vue({
    data: function () {
    return {
    childWords: ""
    }
    },
    components: {
    componentA
    },
    methods: {
    listenToMyBoy: function (msg){
    this.childWords = msg
    }
    }
    })
    }


    componentA.vue中 

    <button v-on:click="onClickMe">like!</button>
    import componentA from './components/componentA'
    export default {
    data: function () {
    return {
    msg: 'I like you!'
    }
    },
    methods: {
    onClickMe: function(){
    this.$emit('child-say',this.msg);
    }
    }
    }

     

    子组件向父传参(.$dispatch)

      用法:vm.$dispatch( event, […args] ),派发事件,首先在实例上触发它,然后沿着父链向上冒泡在触发一个监听器后停止。
      例子:App.vue中events中注册”child-say”事件。子组件componentA中,单击按钮后触发”child-say”事件,并传参msg给父组件。父组件中”child-say”方法把msg赋值给childWords,显示在<p>标签中。
    App.vue中

    <p>Do you like me? {{childWords}}</p>
    <component-a msgfromfa="(Just Say U Love Me)"></component-a>
    import componentA from './components/componentA'
    export default {
    new Vue({
    events: {
    'child-say' : function(msg){
    this.childWords = msg
    }
    }
    })
    }


    componentA.vue中 

    <button v-on:click="onClickMe">like!</button>
    import componentA from './components/componentA'
    export default {
    data: function () {
    return {
    msg: 'I like you!'
    }
    },
    methods: {
    onClickMe: function(){
    this.$dispatch('child-say',this.msg);
    }
    }
    }
  • 相关阅读:
    利用Sentinel实现Redis主从切换
    Docker应用一:docker介绍
    利用RAP搭建可视化接口管理平台
    Lucene初步搜索
    Lucene索引的初步创建
    kettle不能正常自动获取字段
    配置hive元数据库mysql时候出现 Unable to find the JDBC database jar on host : master
    Lost connection to MySQL server at ‘reading initial communication packet', system error: 0 mysql远程连接问题
    Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (111)解决方法
    Sqoop import加载HBase案例详解
  • 原文地址:https://www.cnblogs.com/cina33blogs/p/6762337.html
Copyright © 2011-2022 走看看