Vuejs 组件――props数据传递的实例代码

发布时间:2017-03-30 19:14 编辑:站点网

说明:

当父组件的值被更改后,子组件的值也随之更改;

当子组件的值被更改后,父组件的值不会变化,而假如再次修改父组件的值,子组件会再次同步。

另外需要注意的是,子组件如果要同步绑定,那么子组件的input需要是v-model,而不能是value属性(那样只能单项绑定,且修改子组件的值后会失去绑定)

【3】双向绑定:

需要使用“.sync”作为修饰词

如示例:

<p id="app"> 
  父组件: 
  <input v-model="val"><br/> 
  子组件: 
  <test :test.sync="val"></test> 
</p> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      val: 1 
    }, 
    components: { 
      "test": { 
        props: ['test'], 
        template: "<input v-model='test'/>" 
      } 
    } 
  }); 
</script> 

效果是无论你改哪一个的值,另外一个都会随之变动。

【4】props验证:

简单来说,当组件获取数据时,进行验证,只有符合条件的时候,才会使用之。

写法是将props变为一个对象,被验证是值是对象的key,验证条件是和key对应的value。

例如:

props: { 
  test: { 
    twoWay: true 
  } 
}, 
                
更多相关内容:
    无相关信息