[vue]组件篇

slot&子组件通过computed修改父组件数据

<div id="app">
    <modal type="primary">
        <p slot="title">春江花月夜</p>
        <p slot="content">江月年年望相似</p>
        <p>foot</p>
        <p>foot</p>
        <p>foot</p>
        <p>foot</p>
    </modal>
</div>
<template id="modal">
    <div>
        <div>
            <slot name="title">title</slot>
        </div>
        <div>
            <slot name="content">content</slot>
        </div>
        <div>
            <slot>xxx</slot>
        </div>
        <button @click="show">{{color}}</button>
    </div>
</template>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
  let modal = {
    template: "#modal",
    props: {
      type: [String],
      default: 'danger',
    },
    methods: {
      show() {
        console.log(this.type);
      }
    },
    computed: {
      color() {
        return 'btn-' + this.type;
      }
    },
  };

  let vm = new Vue({
    el: '#app',
    methods: {},
    components: {
      modal,
    }
  });
</script>

render方法渲染组件

1.render 渲染的是组件模板对象

2.原有的#app里的内容被覆盖

<div id="app">
    被覆盖
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
  let login = {
    template: "<div>login</div>"
  };

  let vm = new Vue({
    el: "#app",
    render: function (createElements) {
      return createElements(login)
    }
  })
</script>

<div id="app">
    被覆盖
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
  let login = {
    template: "<div>login</div>"
  };

  let vm = new Vue({
    el: "#app",
    render: c => c(login),
  })
</script>