<div id="app"> <son-component v-on:parent-method="parentMethod"></son-component> <br /> <div>{{ count }}</div> </div> <template id="sonComponent"> <button v-on:click="toTest">单击子组件</button> </template> <script type="text/javascript"> const SonComponent = { template: '#sonComponent', methods: { toTest() { this.$emit('parent-method'); } } }; const vm = new Vue({ el: '#app', components: { SonComponent }, data: { count: 0 }, methods: { parentMethod() { this.count++; } } }); </script>$emit 方法必须有一个参数指定要触发的事件,同时支持更多的可选参数,通过这些参数,子组件可以将自己的数据传递给事件绑定的方法,而绑定的方法是定义在父组件中的,所以就可以间接地使用 $emit 方法,将子组件中的数据传递给父组件。
<div id="app"> <son-component v-on:parent-method="parentMethod"></son-component> <br /> <div>{{ count }}</div> </div> <template id="sonComponent"> <button v-on:click="toTest">单击子组件</button> </template> <script type="text/javascript"> const SonComponent = { template: '#sonComponent', methods: { toTest() { this.$emit('parent-method', 2); } } }; const vm = new Vue({ el: '#app', components: { SonComponent }, data: { count: 0 }, methods: { parentMethod(step) { this.count += step; } } }); </script>
<div id="app"> <son-component v-bind:func-data="increment"></son-component> <br /> {{ count }} </div> <template id="sonComponentTemplate"> <button v-on:click="toTest">单击递增</button> </template> <script type="text/javascript"> const SonComponent = { template: '#sonComponentTemplate', props: { funcData: { type: Function } }, methods: { toTest() { this.funcData(2); } } }; const vm = new Vue({ el: '#app', components: { SonComponent }, data: { count: 0 }, methods: { increment(step) { this.count += step; } } }); </script>
<div id="app"> name: {{ name }}<br /> <input v-model="name" /><br /> </div> <script type="text/javascript"> const vm = new Vue({ el: '#app', data: { name: '' } }); </script>实际上,v-model 是 v-bind:value 和 v-on:input 两个指令的组合:
<div id="app"> name: {{ name }}<br /> <input v-bind:value="name" v-on:input="demoInputChange($event)" /><br /> </div> <script type="text/javascript"> const vm = new Vue({ el: '#app', data: { name: '' }, methods: { demoInputChange(event) { this.name = event.target.value; } } }); </script>既然 v-bind 和 v-on 的组合可以实现 input 元素的 value 属性同 Vue.js 实例对象的数据属性的双向绑定,同样可以用在子组件上,实现子组件的 value 和数据属性的双向绑定,代码如下:
<div id="app"> <!-- 子组件使用v-bind和v-on:input的组合 --> age: {{ age }}<br /> <son-component v-bind:age="age" v-on:input="sonChange"></son-component> </div> <template id="sonComponentTemplate"> <input type="text" v-bind:value="age" v-on:input="toChange($event)" /> </template> <script type="text/javascript"> const SonComponent = { template: '#sonComponentTemplate', props: ['age'], methods: { toChange(event) { this.$emit('input', event.target.value); } } }; const vm = new Vue({ el: '#app', components: { SonComponent }, data: { age: 0 }, methods: { sonChange(age) { this.age = age; } } }); </script>使用 v-model 合并子组件的 v-bind 和 v-on 指令,代码如下:
<div id="app"> <!-- 子组件使用v-bind和v-on:input的组合 --> age: {{ age }}<br /> <son-component v-model="age"></son-component> </div> <template id="sonComponentTemplate"> <input type="text" v-bind:value="age" v-on:input="toChange($event)" /> </template> <script type="text/javascript"> const SonComponent = { template: '#sonComponentTemplate', props: ["age"], methods: { toChange(event) { this.$emit('input', event.target.value); } } }; const vm = new Vue({ el: '#app', components: { SonComponent }, data: { age: 0 } }); </script>
本文链接:http://task.lmcjl.com/news/14193.html