<script src="https://www.jb51.net/public/javascripts/vue.js"></script> <body> <div> <done-button number1="a" number2="1" :number3="1" ></done-button> </div> <script> Vue.component('done-button', { template: '<button :num1="number1" :num2="number2" :num3="number3">{{number1}}</button>', props: { number1: { type: Number }, number2: { type: Number }, number3: { type: Number } } }); new Vue({ el: '#app1' }); </script>
props 允许接受一个对象作为参数，每个参数作为一个元素属性，type 为属性的值期待的类型；
如果条件不符合，vue 的开发版下会在 console 打印出错误信息，但功能还是能正常传值的；
事例中 number2 传递的其实是 String 类型的 '1'，而只有 :number3 这种赋值才能传递数值类型的 1；
可选项：
{ // 属性类型： String、Number、Boolean、Function、Object、Array，null-任意类型， // 可以使用数组多选 type: null, // 是否必须被赋值：true、false required: false, // 默认值：可以是一般任意值或有返回值的函数 default: '', // 自定义判断函数：参数 value 为调用时传入的值， // 返回 true、false 来通知 vue 机制是否报错 validator: function(value){ return true } }
7. 组件内给实例发送通知：
<script src="https://www.jb51.net/public/javascripts/vue.js"></script> <body> <div> <done-button v-on:child="father" ></done-button> </div> <script> Vue.component('done-button', { template: '<button v-on:click="add()">增加</button>', methods: { add: function () { this.$emit('child', 11); } } }); new Vue({ el: '#app1', methods: { father: function(number) { console.log('father' + number); } } }); </script>
组件内无法直接与组件外数据集绑定，只能发送事件通知，组件内使用 this.$emit('child', 11) 告诉实例，该调用 child 事件了，后面的参数会变成 child 的调用参数传递；
实例在初始化组件时，定义 v-on:child="father" 元素属性，来监听 child 事件收到通知时应该执行什么处理，通过 father 的形参，可以直接访问 child 的调用参数；
8. 组件之间通信：
<script src="https://www.jb51.net/public/javascripts/vue.js"></script> <body> <div> <done-button ></done-button> <cancel-button></cancel-button> </div> <script> var bus = new Vue(); Vue.component('done-button', { template: '<button v-on:click="send()">发送</button>', methods: { send: function () { bus.$emit('done-emit', 11); } } }); Vue.component('cancel-button', { template: '<p>{{text}}</p>', data: function (){ return { text: '00' } }, mounted: function() { var _this = this; bus.$on('done-emit', function(number) { _this.text = number; }); } }); new Vue({ el: '#app1', methods: { call: function(value) { console.log('father:' + value); } } }); </script>
可以定义一个全局实例 bus ，在不同组件内使用 bus.$emit 发送通知，使用 bus.$on 监听通知；
9. 组件内容节点的分发：
<script src="https://www.jb51.net/public/javascripts/vue.js"></script> <body> <div> <box></box> <box> <h4>box1</h4> </box> <box>{{box2Text}}</box> </div> <script> Vue.component('box', { template: '<p><slot>默认</slot></p>' }); new Vue({ el: '#app1', data: { box2Text: 'box2' } }); </script>
vue 默认在组件内定义了 <slot> 标签，用于获取组件被使用时的内容节点；
<slot> 标签的内容为组件的默认内容节点；
内容节点也可使用动态数据；
10. 多个 <slot> 标签之间的使用：