账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    VUE如何用父组件的点击动作,触发子组件中的动作
    • 2017-12-05 00:00
    • 11
    38
    0

    这个是父组件

    <template>
      <div id="Parent">
        <button v-on:click="parentClick">Parent Click</button>
        <ul>
          <location v-for="child in children">
          </location>
        </ul>
      </div>
    </template>
    
    <script>
      import child from './Child.vue'
      
      export default {
        components: {
          child
        },
        methods: {
          deployAll () {
            console.log('Parent Click')
            this.$emit('parentClick')
          }
        },
        computed: {
          children () {
            return [
              {
                id: '1',
                name: 'Beijing',
              },
              {
                id: '2',
                name: 'Xiamen',
              }
            ]
          }
        }
      }
    </script>

    子组件:

    <template>
      <li>
        <button v-on:parentClick="childClick">Child Click</button>
      </li>
    </template>
    
    <script>
      export default {
        methods: {
          childClick () {
            console.log('Child Click ')
          }
        },
        props: ['child']
      }
    </script>

    我想让父组件中的Parent Click触发子组件中的Child Click按钮,或者子组件中的childClick方法也可以。不知道该如何处理

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 王者荣耀名字男 普通会员 1楼

      在Vue中,父组件可以通过监听子组件的点击事件,然后在事件触发时调用子组件中的方法。这种方式被称为事件冒泡。以下是一个简单的例子:

      首先,子组件可以定义一个事件处理器方法,然后在事件触发时调用这个方法:

      javascript export default { methods: { handleClick() { console.log('子组件被点击'); } } }

      然后,父组件可以通过在父组件的模板中绑定子组件的事件处理器方法来触发事件:

      ```html ```

      在父组件中,你可以通过这种方式触发子组件的点击事件:

      ```javascript

      ```

      这样,当子组件被点击时,就会触发父组件的handleClick方法,从而在父组件的模板中看到子组件被点击的输出。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部