zoukankan      html  css  js  c++  java
  • vue 三种传值方法

    话不多说,直接撰写

    第一种:父传子

    父:

    <template>

      <div> 父组件: <input type="text" v-model="val">(v-model双向绑定)

       <!-- 这里是引入子组件 -->

      <child :inputName="name"></child> </div>

    </template>

    <script>

      import child from './child'

      export default {

        components: { child },

        data () {

          return {

            val: ''

          }

         }

      }

    </script>

    子组件

    <template>

      <div> 子组件: <span>{{inputName}}</span> </div>

    </template>

    <script>

    export default {

      // 接受父组件的值

      props: {

         inputName: String,

         required: true

      }

    }

    </script>

    子传父

    子:

    <template>

      <div> 子组件: <span>{{childValue}}</span> <!-- 定义一个子组件传值的方法 --> <input type="button" value="点击触发" @click="childClick"> </div>

    </template>

    <script>

    export default {

      data () {

        return {

          childValue: '我是子组件的数据'

         }

       },

       methods: {

         childClick () {

           // childByValue是在父组件on监听的方法 // 第二个参数this.childValue是需要传的值

           this.$emit('childByValue', this.childValue)

        }

      }

    }

    </script>

    父:

    <template>

      <div> 父组件: <span>{{name}}</span> <br> <br> <!-- 引入子组件 定义一个on的方法监听子组件的状态--> <child v-on:childByValue="childByValue"></child> </div>

    </template>

    <script>

    import child from './child'

    export default {

      components: { child },

      data () {

        return { name: '' }

      },

      methods: {

        childByValue: function (childValue) {

          // childValue就是子组件传过来的值

          this.name = childValue

        }

      }

    }

    </script>

    非父子间传值

    (tip:需通过新定义个vue实例去传值通过bus.js文件,该文件是你自己新建的文件,随你放在那里,但之后需要引用,这个文件也可以用于兄弟间传值,简单的解释就是该文件相当于是一个中转站,它就是中间做处理的,用来传递和接收的)

    首先介绍下bus创建

    let Hub = new Vue(); //一个新的vue实例,事件中心

    下面为具体操作方法

     触发传递参数

    <div @click="xuanFn(5)"></div>
    
    xuanFn: function(a){
    	var that = this;
            Hub.$emit('name',a);//Hub触发事件
    },

    接收参数事件

    <div></div>
    created() {
        Hub.$on('name', (msg) => { //Hub接收事件
            this.xuanname= msg;
        });
    }
    

      

    最后,各位大佬们动动你们发财的小手,赞一下,谢谢啦

  • 相关阅读:
    oracle job
    mysql与oracle之间的数据类型转换
    Oracle ORA-02069: 此操作的 global_names 参数必须设置为 TRUE
    oracle sequence 详解
    ORA-08004: 序列 SEQ_XXX.NEXTVAL exceeds MAXVALUE 无法实例化
    How to change Hostname / IP for a Grid Infrastructure Oracle Restart Standalone Configuration (SIHA) (文档 ID 1552810.1)
    oracle-1条updata的故事
    ADAPTIVE LOG FILE SYNC 引起的高Log File Sync警示
    oracle 静默创建数据库
    oracle 中文Linux安装乱码问题
  • 原文地址:https://www.cnblogs.com/fengxueshang/p/9571168.html
Copyright © 2011-2022 走看看