zoukankan      html  css  js  c++  java
  • vue ---- 组件传值之间使用 v-model

    父子组件通信,都是单项的,很多时候需要双向通信。方法如下:

      1、父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx') 

      2、父组件传值直接传对象,子组件收到对象后可随意改变对象的属性,但不能改变对象本身。

      3、父组件使用: v-model 

      第一种曾经被废除过,由于维护成本的原因被删掉,但经过证实,确实有存在的意义,又被加上。

      第一种:

    父组件:
        <template>
      <div>
        <aa class="abc" :snycTest.sync="test" ></aa>
          {{'外面的值:' + test}}
        <button @click="fn">
          外面改变里面
        </button>
         
      </div>
    </template>
     
    <script>
    import aa from './test.vue'
      export default {
        data () {
          return {
            test: ''
          }
        },
        methods: {
          fn () {
            this.test += 1
          }
        },
        components:{
          aa
        }
      }
    </script>
    子组件:
     <template>
      <div>
        <ul>
          <li>{{'里面的值:'+ snycTest}}</li>
          <button @click="fn2">里面改变外面</button>
        </ul>
      </div>
    </template>
    
    <script>
      export default {
        props: {
          snycTest: ''
        },
        methods: {
          fn2 () {
            this.$emit('update:snycTest', this.snycTest+1) //这儿是关键 update:snycTest 自定义事件会告诉父组件将父组件的 test值改为this.snycTest+1,并传回给子组件。
    } } } </script>

    v-model写法一:

    父组件:
     <template>
      <div>
        <aa class="abc" v-model="test" ></aa>  // 组件中使用v-model
          {{'外面的值:' + test}} // 这儿试验test与内部msg值为双向绑定关系
        <button @click="fn">
          外面改变里面
        </button>
        
      </div>
    </template>
    
    <script>
    import aa from './test.vue'
      export default {
        data () {
          return {
            test: ''
          }
        },
        methods: {
          fn () {
            this.test += 1 
          }
        },
        components:{
          aa
        }
      }
    </script>
    子组件写法一:
    <template>
      <div>
        <ul>
          <li>{{'里面的值:'+ msg}}</li>
          <button @click="fn2">里面改变外面</button>
        </ul>
      </div>
    </template>
    
    <script>
      export default {
        model: {    // 使用model, 这儿2个属性,prop属性说,我要将msg作为该组件被使用时(此处为aa组件被父组件调用)v-model能取到的值,event说,我emit ‘cc’ 的时候,参数的值就是父组件v-model收到的值。
          prop: 'msg',
          event: 'cc'
        },
        props: {
          msg: ''
        },
        methods: {
          fn2 () {
            this.$emit('cc', this.msg+2)
          }
        }
      }
    </script>

    v-model写法二

      父组件 <aa class="abc" v-model='test' ></aa> 。
    子组件
    <template>
     <div>
        <ul>
          <li>{{'里面的值:'+ value}}</li> // 组件使用时有v-model属性,value初始传的‘what’ 不会被渲染,而是v-model绑定的test值被渲染,这儿value会被重新赋值为v-model绑定的test的值。
          <button @click="fn2">里面改变外面</button>
        </ul>
      </div>
    </template>
    
    <script>
      export default {
        props: {
          value: { // 必须要使用value
         default: '',
        },
        },
    
        methods: {
          fn2 () {
            this.$emit('input', this.value+2) // 这儿必须用input 发送数据,发送的数据会被父级v-model=“test”接受到,再被value=test传回来。
          }
        }
      }

    一般双向绑定用v-model写法一。

  • 相关阅读:
    使用tcmalloc编译启动时宕机
    使用tcmalloc编译出现undefined reference to `sem_init'
    使用AddressSanitizer做内存分析(一)——入门篇
    VIM-美化你的标签栏
    Entity Framework Code First (六)存储过程
    Entity Framework Code First (五)Fluent API
    Entity Framework Code First (四)Fluent API
    Entity Framework Code First (三)Data Annotations
    Entity Framework Code First (二)Custom Conventions
    Entity Framework Code First (一)Conventions
  • 原文地址:https://www.cnblogs.com/yuerdong/p/9871944.html
Copyright © 2011-2022 走看看