上文说到组件通信,父传子通过props 而子传父就要用到$emit,父组件监听子事件,父组件通过子组件 $event 访问到被抛出的这个值。 如下面的通过子组件点击分类,父组件获取子组件的点击 我是分割线 <!DO…
Vue系列教程-20-component-组件化-props-父传子数据
props:子组件通过props获取父组件v—bind绑定的数据。 父组件绑定数据(这里app为父组件): <div id="app"> <!--2.将父数据赋值给子数据,从右到左--> <…
Vue系列教程-19-component-组件化-data属性-为什么data是函数?
注意:component的data属性必须是函数,为了避免多个组件实例共享同一个数据。 Vue.component('my-count',{ template:"#myCount", data() { return { …
Vue系列教程-18-component-组件化-模板抽离
模板抽离? 因为html代码写在template里面看起来乱,格式不好控制。 模板抽离一:写在script里面, 模板抽离二:写在template标签里面 模板抽离三:在.vue 文件里 带有template标签,以后再…
Vue系列教程-17-component-语法糖
前面创建组件通过: //创建组件构造器 const myTitle = Vue.extend({template:""}); //注册组件 Vue.component('my-title',myTitle); 语法糖写法…
Vue系列教程-16-component-组件化-父子组件
实例组件通过components,指定子组件,疯狂套娃。 我是分割线 <!DOCTYPE html> <html lang="en"> <head> <meta charset=…
Vue系列教程-15-component-组件化-全局组件-局部组件
全局组件:通过vue直接注册的。 const myTitle = Vue.extend({template:""}); 局部组件:通过vue实例创建的组件(components),只有这个实例里可以用 let app =…
Vue系列教程-14-component-组件化-基本使用
component:组件,是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码,并且在其它页面使用。 使用步骤: 1.创建组件构造器 const myTitle = Vue.extend({…
Vue系列教程-13-filters-过滤器
filters:同名字起过滤的作用,过滤一些内容:如违禁词。 使用:数据后加| 过滤器名字 我是分割线 <!DOCTYPE html> <html lang="en"> <head> …
Vue系列教程-12-computed-计算属性(get,set)
computed:内部有get和set两个方法,但一般不用set,在没有set的情况下默认为get 我是分割线 <!DOCTYPE html> <html lang="en"> <head&…