vue父子组件传值以及单向数据流问题详解

<div id="app">
    <blog-item :title="title"></blog-item>
</div>
// 定义子组件
Vue.component("blog-item", {
      props: ['title'],
      data() {
        return {
        }
      },
      template: "<p>{{title}}</p>"
 })
// 定义父组件
new Vue({
      el: "#app",
      data() {
        return {
          title: "msg",
        }
      },
    })

props: {
      title: String,
      likes: Number,
      isPublished: Boolean,
      commentIds: Array,
      author: Object,
      callback: Function,
      contactsPromise: Promise // or any other constructor
    }

//两个组件公共的自定义函数
      function Person (firstName, lastName) {
        this.firstName = firstName
        this.lastName = lastName
      }
      //子组件中使用
      Vue.component('blog-post', {
      props: {
        author: Person
      }
      //父组件中使用
      var obj = new Person("1","2")
      <blog-post :author='obj'></blog-post>

// 自定义函数
     Vue.component('blog-post', {
      props: {
        propsA: String,//必须是字符串类型
        propsB: [String,Number],//多个可选的类型
        propsC: {type:Number,default:100},//定义类型并设置默认值
        // 自定义验证函数
        propsD:{
          validator: function (value) {
            // 这个值必须匹配下列字符串中的一个
            return ['success', 'warning', 'danger'].indexOf(value) !== -1
         }
        }
      }

<div id="app">
    <blog-item :title="title1"></blog-item>
    <blog-item :title="title2"></blog-item>
    <blog-item :title="title3"></blog-item>
    <hr>
    <button @click='toclick'>点我</button>
  </div>
  // 定义子组件
    Vue.component("blog-item", {
      props: ['title'],
      data() {
        return {
        }
      },
      template: "<p>{{title}}</p>"
    })
    // 父组件
    new Vue({
      el: "#app",
      data() {
        return {
          title1: "111",
          title2: "222",
          title3: "333"
        }
      },
      methods: {
        toclick() {
          this.title3 = "000"
        }
      }
    })

<div id="app">
    <blog-item :title="title"></blog-item>
  </div>
  // 定义子组件
    Vue.component("blog-item", {
      props: ['title'],
      computed: {
        computedTitle() {
          return "computedTitle" + this.title
        }
      },
      data() {
        return {
          subTitle: "subTitle" + this.title
        }
      },
      template: "<p>{{title}}==={{subTitle}}==={{computedTitle}}</p>"
    })
    // 父组件
    new Vue({
      el: "#app",
      data() {
        return {
          title: "111",
        }
      },
    })