Vue-组件1

<my-component></my-component>

Vue.component(‘my-component‘,{
   template: ‘<div>组件内容</div>‘
})

var app = new Vue({
   el:‘#app‘,
   components:{
       ‘‘my-components:{
            template:‘<div>组件内容</div>‘
        }
     }  
})

<div id="app" style="width:300px;height:200px;border:2px solid skyblue">
  <child-component msg="我是父组件的内容"></child-component>
  <hr>
 <!--  v-bind进行动态数据动态绑定 将input中的sth传给子组件 -->
  <input type="text" v-model="dadmsg">
  <bind-component :sth="dadmsg"></bind-component>
</div>

var app = new Vue({
  el: ‘#app‘,
  data: {
    dadmsg: ‘happy‘
  },
  components: {
    ‘child-component‘: {
      props: [‘msg‘],
      template: ‘<div>{{msg}}</div>‘
    },
    ‘bind-component‘: {
      props: [‘sth‘],
      template: ‘<div>{{sth}}</div>‘
    }
  }
})

<div id=‘app‘>
  <child-component msg=‘今天也要努力啊‘></child-component>
</div>

let app = new Vue({
  el: ‘#app‘,
  components: {
    ‘child-component‘: {
      props: [‘msg‘],
      template: ‘<div>{{count}}</div>‘,
      data() {
        return {
          count: this.msg
        }
      }
    }
  }
})

<div id="app">
  <input type="text" v-model="width">
  <width-component :width=‘width‘></width-component>
</div>

let app = new Vue({
  el: "#app",
  data: {
    width: 0
  },
  components: {
    ‘width-component‘: {
      props: [‘width‘],
      template: ‘<div :style="style"></div>‘,
      computed: {
        style() {
          return {
            width: this.width + ‘px‘,
            background: ‘red‘,
            height: ‘30px‘
          }
        }
      }
    }
  }
})

<div id="app">
  <style-component :a=‘a‘ :b=‘b‘ :c=‘c‘ :d=‘d‘ :e=‘e‘ :g=‘g‘></style-component>
</div>

let app = new Vue({
  el: ‘#app‘,
  data: {
    a: 1,
    b: ‘2‘,
    c: ‘‘, //空字符串，就取默认的true
    d: [111, 222, 333],
    e: console.log(),
    g: 3
  },
  components: {
    ‘styleComponent‘: {
      props: {
        //数字类型
        a: {
          type: Number,
          required: true //必传
        },
        //字符串类型
        b: {
          type: [String, Number]
        },
        //布尔类型
        c: {
          type: Boolean,
          default: true //默认值
        },
        //数组或对象  默认值是函数形式返回
        d: {
          type: Array,
          default: function() {
            return []
          }
        },
        //函数类型
        e: {
          type: Function
        },
        //自定义一个函数
        g: {
          validator: function(value) {
            return value < 10
          }
        }

      },
      template: ‘<div>{{a}}--{{b}}--{{c}}--{{d}}--{{g}}</div>‘
    }
  }
})