zoukankan      html  css  js  c++  java
  • vue.js $refs和$emit 父子组件交互

    父调子 $refs (把父组件的数据传给子组件) 

    <template> <div id="app"> <input type="button" name="" id="" @click="parentCall" value="父调子" /> <hello ref="chil" />//hello组件 </div> </template> <script> import hello from './components/Hello' export default { name: 'app', 'components': { hello }, methods: {    parentCall () {      this.$refs.chil.chilFn('我是父元素传过来的')    } } } </script> /*Hello.vue :*/ <template> <div class="hello"></div> </template> <script> export default { name: 'hello', 'methods': {    chilFn (msg) {      alert(msg)    } } } </script>
    子调父 $emit (把子组件的数据传给父组件)
    
    ps:App.vue 父组件
      Hello.vue 子组件
     
    
    <!--App.vue  :-->
    
    <template>
      <div id="app">
        <hello @newNodeEvent="parentLisen" />
      </div>
    </template>
    
    <script>
        import hello from './components/Hello'
        export default {
            name: 'app',
            'components': {
                hello
            },
            methods: {
                parentLisen(evtValue) {    
                    //evtValue 是子组件传过来的值
                    alert(evtValue)
                }
            }
        }
    </script>
    
    
    <!--Hello.vue  :-->
    
    <template>
      <div class="hello">
        <input type="button" name="" id="" @click="chilCall()" value="子调父" /> 
      </div>
    </template>
    
    <script>
        export default {
            name: 'hello',
            'methods': {
                chilCall(pars) {
                    this.$emit('newNodeEvent', '我是子元素传过来的')
                }
            }
        }
    </script>
    
  • 相关阅读:
    IDEA安装和JDK的配置
    IDEA里面创建maven项目,依赖
    JSON的简单书写(初学),使用Java语言反序列化
    Spring中的转换器:Converter
    关于Spring MVC中的表单标签库的使用
    解决Spring框架下中文乱码的问题
    SpringMVC中使用DispatcherServlet
    八大排序算法:冒泡排序
    总线与南桥和北桥
    设备驱动与控制器 I/O
  • 原文地址:https://www.cnblogs.com/axl234/p/7797247.html
Copyright © 2011-2022 走看看