Vue.js的组件之间通信-动态属性传递

<template>
 <div id="myapp">
 <input type="text" v-model="myVal">
 <com-a :my-value="myVal"></com-a>
 </div></template><script>
 import ComA from './components/a.vue'
 export default { components: {
 ComA
 },
 data () { return { myVal: ''
 }
 }
 }</script>

<template>
 <div class="hello">
 {{hello}}
 {{ myValue }} </div></template><script>
 export default {// 声明number属性// 未指定类型// props: ['number'],// 指定类型
 props: { 'my-value': [Number, String]
 },
 data () { return { hello: 'I am componnet a'
 }
 }
 }</script>

<com-a :my-value="myVal">
 <p>我是一个插槽</p>
 <span>123456</span></com-a>

<template>
 <div class="hello">
 {{hello}}
 {{ myValue }}
 //给插槽设置默认值 <slot>no slot</slot>
 </div></template>

<com-a :my-value="myVal"></com-a>

<slot>no slot</slot>

<template> <div id="myapp">
 <!--具名插槽-->
 <com-a :my-value="myVal">
 <p slot="header">xxxx header</p>
 <p slot="footer">yyyy footer</p>
 </com-a>
 </div></template>

<template> <div class="hello">
 {{hello}}
 {{ myValue }} <!--<slot>no slot</slot>-->
 <br>
 <slot name="header">no header</slot>
 <p>乱七八糟的内容</p>
 <slot name="footer">no footer</slot>
 </div></template>