Vue中的组件通信

Posted 2021-03-01 a973692898

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue中的组件通信相关的知识，希望对你有一定的参考价值。

这两天在学Vue,记录一下我认为比较重要的东西

Vue中的组件通信:

我们可以分为3个步骤来:

1.声明局部子组件,简称 "声子",

2.挂载到dom树上面去,简称:"挂子"

3.进行使用,简称:"用子"

上面写的别人可能看不太明白,毕竟只是我的看法:

<body>
    <div id="app">

    </div>
</body>
先写一个div,给它一个ID=app

<script>
  var Vheard = {
    template: `
      <div>我是头部组件</div>
    `
  }

  //声子
  var App = {
    template: `
      <div>
        <Vheard />
        </div>
    `,
    components: {
      Vheard
    }
  }
  var vm = new Vue({
    el: "#app",
    data() {
      return {

      }
    },
    components: {
      //挂子
      App
    },
    //用子
    template: `
      <App />
    `
  });
</script>

父组件向子组件传递信息

子组件向父组件传递信息

<script>
    //孩子
    Vue.component(‘Child‘, {
        data() {
            return {
                textProp: this.childData
            }
        },
        template: `
            <div>
            我是孩子
            <p>{{textProp}}</p>
            <input type=‘text‘ v-model=‘textProp‘
            @input=‘childValue(textProp)‘ />
            </div>
            
        `,
        props: [‘childData‘],
        methods: {
            childValue(val) {
                this.$emit(‘childHeard‘, val)
            }
        }
    })


    //父亲
    Vue.component(‘Parent‘, {
        data() {
            return {
                msg: ‘加班好玩吗?‘
            }
        },
        template: `
            <div>
                我是父亲
                <Child :childData=‘msg‘ @childHeard=‘childHeard‘ />
            </div>
        `,
        methods: {
            childHeard(val) {
                console.log(val)
            }
        }
    })

    //声子
    var App = {
        template: `
            <div>
                <Parent />
            </div>
        `
    }

    var vm = new Vue({
        el: ‘#app‘,
        data() {
            return {

            }
        },
        //用子
        components: {
            App
        },
        //挂子
        template: `
        <App />
        `
    })
</script>

以上是关于Vue中的组件通信的主要内容，如果未能解决你的问题，请参考以下文章

Vue中的Bus（总线）实现非父子组件通信