标签:直接 label gen pre methods rip tps ack 输入框
在vue2.4以前,父组件向子组件传值用props;子组件不能直接更改父组件传入的值,需要通过$emit触发自定义事件,通知父组件改变后的值。
<template> <div> <p>父组件传入子组件的值:{{name}}</p> <fieldset> <legend>子组件</legend> <child :val.sync="name"> </child> </fieldset> </div> </template> <script> import child from ‘./child‘; export default { components:{child}, data: function () { return { name:‘hello‘ } }, methods: { } } </script> <style> </style>
子组件:
<template> <div style="margin-top: 300px;margin-left: 500px;"> <label class="child"> 输入框: <input :value=val @input="$emit(‘update:val‘,$event.target.value)"/> </label> </div> </template> <script> export default { name:‘child‘, props:{ val:String }, data() { return { } }, methods: { } } </script> <style> </style>
update:val
方法,来监听子组件修改值的事件。参考:https://www.jianshu.com/p/4649d317adfe
标签:直接 label gen pre methods rip tps ack 输入框
原文地址:https://www.cnblogs.com/shix0909/p/11217591.html