vue重点2:兄弟组件之间的传值

步骤

vue重点2:兄弟组件之间的传值_第1张图片

代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <tom-test></tom-test>
        <jerry-test></jerry-test>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var v = new Vue();
        Vue.component('tom-test', {
     
            data: function () {
     
                return {
     
                    num: 0
                }
            },
            template: `
                <div>
                    <span>tom{
      {
      num}}</span>
                    <button @click="handle">点击</button>
                </div>
            `,
            mounted: function () {
     
                v.$on('tom-num', () => {
     
                    this.num += 10;
                })
            },
            methods: {
     
                handle: function () {
     
                    v.$emit('jerry-num')
                }
            },
        })
        Vue.component('jerry-test', {
     
            data: function () {
     
                return {
     
                    num: 0
                }
            },
            template: `
                <div>
                    <span>jerry{
      {
      num}}</span>
                    <button @click="handle">点击</button>
                </div>
            `,
            mounted: function () {
     
                v.$on('jerry-num', () => {
     
                    this.num += 3;
                })
            },
            methods: {
     
                handle: function () {
     
                    v.$emit('tom-num')
                }
            },
        })
        var vm = new Vue({
     
            el: '#app',

        })
    </script>
</body>

</html>

效果:

vue重点2:兄弟组件之间的传值_第2张图片

注意:

不能把mounted放在methods里!!!!!!!!!!

你可能感兴趣的:(vue)