vue-cli: 子组件与父组件通信、组件插槽slot(内容分发)、 动态组件

一. 子组件与父组件通信

父组件向子组件传递参数, 子组件修改内容后, 向父组件返回内容

<template>
  <div class="demo">
<!--    <h1>子组件与父组件通信</h1>-->
<!--    <my-component-->
<!--      :text="content"-->
<!--      @on-callback="getData"-->
<!--    ></my-component>-->
<!--    <div>{
   { content }}</div>-->
    <my-component
      v-model="content"
    ></my-component>
    <div>{
  { content }}</div>
  </div>
</template>
<script>
import MyComponent from '../components/component2'
export default {
    
  name: 'Demo13',
  data () {
    
    return {
    
      content: 'sdsssdffgw'
    }
  },
  components: {
    
    MyComponent
  },
  methods: {
    
    getData (val) {
    
      this.content = val
    }
  }
}
</script>

<style lang="less" scoped> </style>

<template>
  <div>
    自定义组件
    <p>{
  { txt }}</p>
    <button @click="modify">修改</button>
    <p>{
  { number }} - {
  { typeof number }}</p>
    <p>{
  { flag }}</p>