1.vue 组件-声明
组件分为全局的和局部的。
-
全局声明
- Vue.component(tagName, options) **
- 引用组件 <tagName></tagName>
- 我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：
-- todo 这里后期根据应用谈一下两者的好处和实际应用
组件的data 必须是一个函数
Vue.component('simple-counter', { template: '', // 技术上 data 的确是一个函数了，因此 Vue 不会警告， // 但是我们却给每个组件实例返回了同一个对象的引用 data: function () { return{ counter:0 } }})new Vue({ el: '#example-2'}) 2. 父子组件的传值-props
// 注册Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 "this.message" 这样使用 template: '{ { message }}'})// 创建根实例new Vue({ el: '#app', data:{ message:"hello", }})
3. 父子组件的值相互传递
在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。
父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！ 我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即： 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。
{
{ total }}