vue语法基础二-组件

组件

Vue组件	说明	注册	使用
全局组件	所有实例都能用全局组件。	Vue.component(tagName, options)	<tagName></tagName>
局部组件	在实例选项中注册局部组件	var Child = {template: '<h1>自定义组件!</h1>'}	' music-list ': Child //music-list只在父模板可用

1.全局组件

• 注册一个全局组件语法格式如下：Vue.component(tagName, options)
• tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：<tagName></tagName>

<div id="app">
  <runoob></runoob>
</div>
<script>
// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

2.局部组件

<div id="app">
  <runoob></runoob>
</div>
<script>
var Child = {
  template: '<h1>自定义组件!</h1>'
}
// 创建根实例
new Vue({
  el: '#app',
  components: {
    // <runoob> 将只在父模板可用
    'runoob': Child
  }
})
</script>

父子组件通信	操作
父组件传给子组件	Prop传递自定义属性
子组件传给父组件	自定义事件

父传子---Prop

prop 是父组件用来传递数据的一个自定义属性。

//1.父组件的数据需要通过 props 把数据传给子组件
<child message="hello!"></child>
//2. 动态 Prop, parentMsga是父组件的数据变量
<child v-bind:message="parentMsg"></child>

Vue.component('child', {
  // 子组件需要显式地用 props 选项声明 "prop"
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app',
  data: {
    parentMsg: '父组件内容'，
  }
})

//子组件
<template>
  <li>{{ todo.text }}</li>
</template>

<script>
export default {
  name: "Todo",
 props: ['todo'],
};
</script>

//父组件
<template>
  <div id="app">
    <ul><Todo v-for="item in sites" v-bind:todo="item" v-bind:key="item.text"></Todo></ul>
  </div>
</template>

<script>
import Todo from "./components/Todo.vue";
export default {
  name: "app",
  data() {
    return {
      sites: [{ text: "Runoob" }, { text: "Google" }, { text: "Taobao" }]
    };
  },
  components: {Todo}
};
</script>

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

子传父---自定义事件

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

//子组件 ButtonCounter.vue
<template>
  <button v-on:click="incrementHandler">{{ counter }}</button>
</template>

<script>
export default {
  name: "button-counter",
 data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementHandler: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
};
</script>

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。v-on:increment

//父组件
<template>
  <div id="app">
     <p>{{ total }}</p>
    <button-counter v-on:increment="incrementTotal"></button-counter>
    <button-counter v-on:increment="incrementTotal"></button-counter>
  </div>
</template>

<script>
import ButtonCounter from "./components/ButtonCounter.vue";
export default {
  name: "app",
  data() {
    return {
       total: 0,
    };
  },
  components: {
  "button-counter":ButtonCounter,
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
};
</script>