// 第一步：通过import将子组件载入父组件的js中
import child from './components/child.vue'
import childB from './components/childB.vue'

  components: {child,childB},

  components: {新名字:child},

<template><div id="app"><!-- 如果注册的组建名中有大写字母，尽量改为 -小写字母，例如：childB,则在使用组件时，要用：<child-b></child-b>--><child></child><child-b></child-b></div>
</template>

<template><div id="app"><div :is="comToRender" @my-event="onChildEvent"></div><button @click="changeFun">切换组建</button></div>
</template>

<!-- 父组件如何加渲染子组 -->
<template><div id="app"><!-- 第三步：使用组件 --><!-- 引入组件的第一种写法 --><!-- 如果注册的组建名中有大写字母，尽量改为 -小写字母，例如：childB,则在使用组件时，要用：<child-b></child-b>--><!-- <child></child><child-b></child-b> --><!--引入组件的第二种写法--><!-- 优点：1.https://cn.vuejs.org/v2/guide/components.html#DOM-%E6%A8%A1%E6%9D%BF%E8%A7%A3%E6%9E%90%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B92.可以动态切换组建 通过v-bind:is--><div :is="comToRender" @my-event="onChildEvent"></div><button @click="changeFun">切换组建</button></div>
</template>
<script>
// 第一步：通过import将子组件载入父组件的js中
import child from './components/child.vue'
import childB from './components/childB.vue'
export default {name: 'app',// 第二步：将子组件在父组件的componerts中注册// 如果想给引入的组建重新命名，那么：// components: {//   新名字:child// },
  components: {child,childB},data() {return {comToRender: 'child',fatherString:'hello children',parameterNum:'1'}},mounted: function() {this.$nextTick(function() {});},methods: {onChildEvent(parmFromChild) {console.log(parmFromChild);},changeFun(){this.comToRender="childB";}}
}</script>
<style>
* {margin: 0;padding: 0;
}body {width: 100%;height: 100%;position: absolute;
}#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;width: 100%;height: 100%;
}</style>

<template><div class="child-conten"><p>{{msg}}</p><button @click='emitMyEvent'>child-emit</button></div>
</template>
<script>
export default {  data() {return {msg: 'I am a components'}},methods: {emitMyEvent() {this.$emit('my-event', this.msg);}}
}</script>

<template><div class="child-conten"><p>{{msg}}</p><button @click='emitMyEvent'>child-emit</button></div>
</template>
<script>
export default {data(){return{msg: 'I am a components children B'}},methods:{emitMyEvent(){this.$emit('my-event',this.msg);}}
}</script>

<template><div id="app"><child number="5" @my-event="onChildEvent"></child></div>
</template>
<script>
// 第一步：通过import将子组件载入父组件的js中
import child from './components/child.vue'
export default {name: 'app',components: {child},data() {return {}},mounted: function() {this.$nextTick(function() {});},methods: {onChildEvent(parmFromChild) {console.log(parmFromChild);}}
}</script>

<template><div class="child-conten"><p>{{msg}}</p><p>我是父组件传递过来的值：{{number}}</p><button @click='emitMyEvent'>child-emit</button></div>
</template>
<script>
export default {// props属性内容的简写：
  props:['number'],data() {return {msg: 'I am a components'}},methods: {emitMyEvent() {this.$emit('my-event', this.msg);}}
}</script>

<template><div id="app"><child number-to-do="5" @my-event="onChildEvent"></child></div>
</template>

<template><div class="child-conten"><p>{{msg}}</p><p>我是父组件传递过来的值：{{numberToDo}}</p><button @click='emitMyEvent'>child-emit</button></div>
</template>
<script>
export default {// props属性内容的简写：
  props: ['number-to-do'],data() {return {msg: 'I am a components'}},// 注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等// 到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：
  mounted: function() {this.$nextTick(function() {console.log('this.numberToDo：' + this.numberToDo);})},methods: {emitMyEvent() {this.$emit('my-event', this.msg);}}
}</script>

<template><div id="app"><input type="text" v-model="fatherString"><child :number-to-do='fatherNum' :string='fatherString' @my-event="onChildEvent"></child></div>
</template>
<script>
// 第一步：通过import将子组件载入父组件的js中
import child from './components/child.vue'
export default {name: 'app',components: {child},data() {return {fatherNum:100,fatherString:'hello children'}},mounted: function() {this.$nextTick(function() {});},methods: {onChildEvent(parmFromChild) {console.log(parmFromChild);}}
}</script>

<template><div class="child-conten"><p>{{msg}}</p><p>我是父组件传递过来的值：{{numberToDo}}</p><p>我是父组件传递过来的值：{{string}}</p><button @click='emitMyEvent'>child-emit</button></div>
</template>
<script>
export default {// props属性内容的简写：
  props: ['number-to-do', 'string'],data() {return {msg: 'I am a components'}},// 注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等// 到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：
  mounted: function() {this.$nextTick(function() {console.log('this.numberToDo：' + this.numberToDo);})},methods: {emitMyEvent() {this.$emit('my-event', this.msg);}}
}</script>

<template><div id="app"><!-- number-to-do不传，则子组件的使用默认值 --><child @my-event="onChildEvent"></child><!-- 子组件中定义number-to-do type: Number ，如果传入不是number类型的参数，则会报错--><child :number-to-do='fatherNum' @my-event="onChildEvent"></child></div>
</template>
<script>
// 第一步：通过import将子组件载入父组件的js中
import child from './components/child.vue'
export default {name: 'app',components: {child},data() {return {fatherNum: 2,}},mounted: function() {this.$nextTick(function() {});},methods: {onChildEvent(parmFromChild) {console.log(parmFromChild);}}
}</script>

<template><div class="child-conten"><p>{{msg}}</p><p>我是父组件传递过来的值：{{numberToDo}}</p><button @click='emitMyEvent'>child-emit</button></div>
</template>
<script>
export default {props: {'number-to-do': {type: Number,default: 100}},data() {return {msg: 'I am a components'}},methods: {emitMyEvent() {this.$emit('my-event', this.msg);}}
}</script>

<template><div id="app"><input type="text" v-model="fatherString"><child :number-to-do='fatherNum' :string='fatherString' @my-event="onChildEvent"><p slot='header'>xxxxx header</p><p slot='footer'>xxxxx footer</p></child></div>
</template>

<template><div class="child-conten"><p>{{msg}}</p><!-- <p>我是父组件传递过来的值：{{numberToDo}}</p><p>我是父组件传递过来的值：{{string}}</p> --><button @click='emitMyEvent'>child-emit</button><br><slot name='header'>no header</slot><p>子组件内容</p><slot name='footer'>no header</slot></div>
</template>