首页 课程中心 问答&分享 读书 公众号框架 HUI H.JS 开放源 登录 & 注册
 vue 组件与父级dom结构交互实例
[ 淡淡的风 ] 发布于 : 2018-09-20  浏览 :  次

组件为一个 input,父级dom元素打印输入内容效果:

<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
{{test}} <my-input color="red" v-on:input="input"></my-input>
<style type="text/css"> </style> <script type="text/javascript" src="https://vuejs.org/js/vue.js"></script> <script type="text/javascript"> Vue.component('my-input',{ props:['color'], data : function(){ return {}; }, template : '<input type="text" v-on:input="$emit(\'input\', $event.target.value)" />' }); var vm = new Vue({ el : "#test", data:{ test : "hi..." }, methods : { input : function(var1){ this.test = var1; } } }); </script> </body> </html>


教程更新
More...