Vue组件详解
使用组件的原因: 提高代码可复用性
组件的使用方法
全局注册
HTML:
中只能含有
我是一个组件
'
})
var app = new Vue({
el: '#app'
})
优点：所有的Vue实例都可以用
缺点：权限太大，容错率降低
局部注册
我是一个组件
'
}
}
})
3. vue组件的模板在某些情况下会受到html标签的限制，比如| ,
这些元素，所以直接在table中使用组件是无效的，此时可以使用is属性来挂载组件
我是父组件 {{count}} ',
data: function () {
return {
count: this.initCount
}
}
}
}
})
另一种情况就是 prop 作为需要被转变的原始值传入。这种情况用计算属性就可以了
步骤一：注册组件
步骤二：将父组件的数据传递进来，并在子组件中用props接收
步骤三：将传递进来的数据通过计算属性进行重新计算
通过计算属性动态控制元素的宽度
要买多少个苹果? {{number}} 您要买多少个苹果? {{number}} 第二个组件 ',
created: function(){
this.$root.bus.$on('send',function(value){
alert(value)
})
}
}
}
})
点击A组件里的按, 就会触发send事件, 同时把数据发出去, B组件监听send事件, 获取传过来的数据
父链: this.$parent
this.$parent.msg = '数据已经修改了'
子链：
this.$refs 提供了为子组件提供索引的方法，用特殊的属性ref为其增加一个索引
// 给子组件添加ref属性
this.formchild = this.$refs.c.msg;
使用slot分发内容
什么是slot(插槽)
为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发. Vue.js 实现了一个内容分发API，使用特殊的 ‘slot’ 元素作为原始内容的插槽
编译的作用域
在深入内容分发 API 之前，我们先明确内容在哪个作用域里编译。假定模板为：
我是标题 文本内容第一部分 文本内容第二部分 我是页脚 一个和尚挑水喝 '
},
'compB': {
template: '两个和尚抬水喝 '
},
'compC': {
template: '三个和尚没水喝 '
}
}
})
|
发表评论 (审核通过后显示评论)：