Vue.js第四天学习笔记(组件)

本文之前，小英分享了小英自己编写的组件：Vue.js，实现了选项卡切换效果和Tree升级版(实现省市多级联动)

首先，让我们向您展示小英编写的一个简单的组件示例：

组件：

template div class=' content ' V-If=' showFlag ' input type=' text ' V-bind : style=' { width : comp width ' px ' } V-model=' comp value ' @ keyup=' my fun ' V-El : getvalue label class=' example-label '观察参数' comp value' :/label的变化{ { comp value } } Button class=' btnbtn-dancer ' @单击=' comp un ' ok/Button/div/Compfrun3360 {type:function，required:true } }，ready:function () {}，computed: {}，//calculate attribute methods : {//method my function 3360 function(){ alert(this。$ els.getvalue. }，data() {//绑定数据返回{showflag: true，} }/脚本调用组件：

template div class=' example-content ' compexample : compvalue . sync=' values ' : compFun=' compFun '/compexample/div/Templatescrimport compexample from '。/componentexample。vue '//import components export default { components 3360 { compexample }，ready: function () {}，methods : { compfen 3360 function(){ alert(' meow ')；}}，data(){ return { values : ' hello ' } }/script在小英编写的组件中，小英在创建组件时对组件的大部分属性都添加了相应的注释。如果你有任何问题，可以留言。

让我们看看编写并调用组件：后的渲染

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。