Vue2知识点回顾（组件篇1）
知识点、图片和代码demo来自《Vue.js实战》
Vue组件的模板在某些情况下会受到html的限制，比如<table>内只允许tr, td, th等，这时候可以用is属性来挂载组件。常见的场景有ul, ol, select等。
<div id="app">
<table>
<tbody is="my-component"></tbody>
</table>
</div>
vue2中props是单向传递，只能父到子。
业务中需要修改props的值，有两种情况：1. 父组件传递初始值进来，子组件在自己的作用域下使用和修改。这种可以在子组件的data里声明一个数据引用父组件传来的prop. 2. prop作为需要被转变的原始值传入。此时可以使用计算属性。
模式1：
模式2：
当prop是数组或者对象时，子组件里的改变是会反映到父组件里。
组件之间的通信分成若干种情况：父子组件通信、兄弟组件通信、跨级组件通信。
自定义事件：子组件用$emit()触发，父组件用$on接收。
v-on接收自定义事件，也可以用.native修饰符表示接收的是原生事件。
自定义组件可以支持在根元素上使用v-model
相当于把子传到父的自定义事件处理函数的第二个参数传给total.（第一个是事件名）
还可以用v-model实现数据的双向传递：例子
完整的代码如下：
<html>
<head>
<title>1</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>总数：{{total}}</p>
<my-component v-model="total"></my-component>
<button @click="handleReduce">-1</button>
</div>
</body>
<script>
Vue.component('my-component', {
props: ['value'],
template: '<input :value="value" @input="updateValue">',
methods: {
updateValue(event) {
this.$emit('input', Number(event.target.value))
}
}
});
var app = new Vue({
el: '#app',
data: {
total: 0
},
methods: {
handleReduce() {
this.total--
}
}
})
</script>
</html>
