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

标签：new   ref   input   自己的   mode   不能   logs   通过   put   

全局组件

- 全局组件定义(体会一下重用性)
<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,维护性

    // 1,写插件时候用全局组件
    // 2,平时用局部组件即可
    
    // 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>

参考

- 双向绑定
<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>

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

标签：new   ref   input   自己的   mode   不能   logs   通过   put   

原文地址：https://www.cnblogs.com/iiiiiher/p/9026840.html