[vue]组件最佳实战

[vue]全局组件和局部组件(嵌套+props引用父组件数据)

[vue]组件篇

[vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick

[vue]实现父子组件数据双向绑定

[vue]render函数渲染组件

[vue]webpack&vue组件工程化实践

组件基础

局部组件	全局组件
定义	定义
注册	-
使用	使用

全局组件(工程中比局部组件更常用)

组件化编程好处: 1,重用性 2,维护性

- 全局组件定义(体会一下重用性)
<div id="app">
    <!--重用性-->
    <my-awsome></my-awsome>
    <my-awsome></my-awsome>
    <my-awsome></my-awsome>
    <!--组件中使用数据-->
    <my-awsome2></my-awsome2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    //全局组件: 1,定义 2,使用
    Vue.component(
        'my-awsome', {
            template: "<h1>全局组件: maomao</h1>"
        }
    );

    Vue.component(
        'my-awsome2', {
            template: "<h1>自己的模板里取自己的数据: {{msg}}</h1>",
            data(){
                return {msg:'maomao-msg'}
            }
        }
    );

    let vm = new Vue({
        el: "#app",
        data: {
            msg: 'hi'
        },
    })
</script>

局部组件(不常用)

- 最简单的局部组件(写法)
<div id="app">
    {{msg}}
    <awsome></awsome>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: 'hi'
        },
        components: {
            awsome: {
                template: "<h1>最简单的局部组件</h1>"
            }
        },
    })
</script>

- 局部组件(带数据)
1.子组件不能直接获取父组件的数据

<div id="app">
    {{msg}}
    <awsome></awsome>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: 'hi'
        },
        components: {
            awsome: {
                data: function () {   //1,data必须是函数类型
                    return {count: 0} //2,返回值必须是对象
                },
                template: "<button @click='count++'>count++: {{count}}</button>"
            }
        },
    })
</script>

- 也可以将对象写在外面(注意: data和template都在对象里)
<div id="app">
    {{msg}}
    <awsome></awsome>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let awsome = {
        data: function () {
            return {count: 0};
        },
        template: "<button @click='count++'>count++: {{count}}</button>"
    };

    let vm = new Vue({
        el: "#app",
        data: {
            msg: 'hi'
        },
        components: {
            awsome: awsome,
        },
    })
</script>

- 组件之间最好不要共享数据
<div id="app">
    <h1>共享数据</h1>
    <awsome></awsome>
    <awsome></awsome>
    <hr>
    <h1>独立空间数据</h1>
    <awsome2></awsome2>
    <awsome2></awsome2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    // 局部组件使用3步骤: 1,创建  2.注册 3,使用

    // 共享数据(数据定义在了componet外部)
    let obj = {count: 0};
    Vue.component('awsome', {
            data: function () {
                return obj;
            },
            template: "<button @click='count++'>awsome: {{count}}</button>"
        }
    );

    //独立数据
    Vue.component('awsome2', {
            data: function () {
                return {count: 0};
            },
            template: "<button @click='count++'>awsome2: {{count}}</button>"
        }
    );
    let vm = new Vue({
        el: "#app",
        data: {
            msg: 'hi'
        },
    })
</script>

子组件获取父组件的数据: props

参考: keepfool

<h1>props: 父组件数据传给子组件</h1>
<div id="app">
    <awsome :my-name="name" :my-age="age"></awsome>
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: 'maomao',
            age: 22
        },
        components: {
            'awsome': {
                template: '<div>name: {{myName}} age:{{myAge}}</div>',
                props: ['myName', 'myAge']
            }
        }
    })
</script>

父子组件嵌套

<div id="app">
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    // 如果要在一个组件使用另一个组件，
    // 1.先保证使用的组件(父组件)得是真实存在，
    // 2.在需要引用这个组件的(子组件)实例上通过components注册这个组件
    // 3.组件需要在父级的模板中通过标签的形式引入
    let grandson = {
        template: '<div>grandson</div>',
    };
    let son = {
        template: '<div>son <grandson></grandson></div>',
        components: {grandson}
    };
    let parent = {
        template: '<div>parent <son></son></div>',
        components: {son}
    };

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

附:

- 了解一下template(生命周期)
1. 如果有template属性会用模板替换掉外部html，只要有此属性app中的内容就没有任何意义了
2. 只能有一个根元素，不能是文本节点

<div id="app">
    {{msg}}
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: 'hi'
        },
        template: "<div>内置组件模板</div>",
    })
</script>

props默认是单向绑定

- 子组件的数据更改,不影响父组件
- 父组件的数据更改,会影响子组件

<div id="app">
    <h1>父组件数据</h1>
    name: {{ name }}
    <input type="text" v-model="name"/> <br>
    age: {{ age }}
    <input type="text" v-model="age"/>

    <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
</div>

<template id="myComponent">
    <div>
        <h1>子组件数据</h1>
        myName: {{ myName }}
        <input type="text" v-model="myName"/> <br>
        myAge: {{ myAge }}
        <input type="text" v-model="myAge"/>
    </div>
</template>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'maomao',
            age: 22
        },
        components: {
            'my-component': {
                template: '#myComponent',
                props: ['myName', 'myAge']
            }
        }
    })
</script>

参考

- 双向绑定(2.x版本不好使)
<my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my-component>

- 单次绑定
<my-component v-bind:my-name.once="name" v-bind:my-age.once="age"></my-component>

webpack中使用全局组件和局部组件

vue组件有两种，一种是全局组件，一种是局部组件。整个项目经常用到的用全局写法，用到比较少的专供特定页面用的使用局部组件。

全局组件引入写法：在项目的main.js中：

import Vue from 'vue';
import MyComponent from '@/components/MyComponent.vue'; // 导入自己写的组件文件

Vue.use(MyComponent); // 自定义全局组件的时候需要Vue.use();

Vue.component('my-component', MyComponent); //初始化组件

new Vue({
  el: '#app',
  router,
  components: {
    App,
    MyComponent
  },
  template: '<App/>',
});

局部组件引入写法：在需要使用组件的a.vue文件中：

<template>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue';
export default {
  components: {MyComponent}, // 直接初始化就可以啦，不需要Vue.use();
  data() {},
  methods: {}
};
</script>

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

下面附上自定义组件的MyComponent.vue文件代码：

<template>
  <div>
    <a @click="methods1()"></a>
  </div>
</template>
<script>
import { MessageBox } from 'mint-ui';
export default {
  data () { // 组件内参数定义在data中
    return {
      data1: {}
    };
  },
  props: { // 组件传参使用props
    value1: String,
    value2: Number
  },
  methods: { // 组件的计算方法
    methods1 () {
    }
  }
};
</script>
<style lang="scss" scoped>
</style>

参考:

https://blog.csdn.net/ywl570717586/article/details/79984909

webpack vue的几种引入方式: http://vue2.mmxiaowu.com/article/584a3957fc007e72b0f576d9