单项数据流的理解

子组件传参

// v-bind=”params”
// :content=”params.content” :a=”params.a” :b=”params.b” :c=”params.c”

  const app = Vue.createApp({
    data() {
      return {
        params: {
          content: 1234,
          a: 123,
          b: 123,
          c: 123
        }
      }
    },
    template: `
      <div><test v-bind="params" /></div>
      `
  });
  app.component('test', {
    props: ['content', 'a', 'b', 'c'],
    template: `<div>{{content}}-{{a}}-{{b}}-{{c}}</div>`
  })
  const vm = app.mount('#root');

大小写传参

// 属性传的时候，使用 content-abc 这种命名，接的时候，使用 contentAbc 命名

  const app = Vue.createApp({
    data() {
      return {
        content: 1234,
      }
    },
    template: `
      <div><test :content-abc="content" /></div>
      `
  });
  app.component('test', {
    props: ['contentAbc'],
    template: `<div>{{contentAbc}}</div>`
  })
  const vm = app.mount('#root');

单向数据流

父组件的数据可以流向子组件，但是子组件不能修改父组件的数据

  const app = Vue.createApp({
    data() {
      return {
        num:1
      }
    },
    template: `
      <div><counter :count="num" /></div>
      `
  });
  app.component('counter', {
    props: ['count'],
    data(){
      return{
        myCount:this.count,
      }
    },
    template: `<div @click="myCount+=1">{{myCount}}</div>`
  })
  const vm = app.mount('#root');