组件

从形式上看是一个自定义html标签；
组件是可复用的vue实例，是构造函数Vue的子类

<!-- 挂载点：是隐式声明的根组件 -->
    <div id="app">
        <child-compoent></child-compoent>
    </div>
<script>
//创建
    const childCompoent = Vue.extend({
        template: `<h1>hello</h1>`,
    });
    //注册
    //使用Vue.component()注册的是全局组件
    Vue.component("child-compoent", childCompoent);
    //挂载
    const vm = new Vue({
        el: '#app',
    });
</script>

全局组件

全局可见，声明在vue实例外部,全局组件可以在多个vue实例中共享,建议通常一个项目只有一个vue实例，尽可能不要使用全局组件，应该使用局部组件代替；

 <div id="app">
        <button-inc></button-inc>
    </div>
    <div id="root">
        <button-inc></button-inc>
    </div>
    <template id="inc">
        <div>
            <button @click='count++'>点赞：+{{count}}</button>
        </div>
    </template>
<script>
    Vue.component('button-inc', {
        //组件中的模板代码：允许存在数据占位符的html字符串
        //模板内容必须写到一对父元素中
        // template: `
        //     <div>
        //         <button @click='count++'>点赞：+{{count}}</button>
        //         </div>
        // `,
        template: '#inc',
        //组件中必须使用函数data（）来声明组件变量
        data() {
            return {
                count: 0,
            }
        }
    });
    const vm = new Vue({
        el: '#app',
    })
    const vm1 = new Vue({
        el: '#root',
    })
</script>

局部组件

局部组件是属于vue实例的,components

<body>
    <div id="app">
        <hello></hello>
    </div>
    <!-- <template id="hello">
        <p>hello {{site}}</p>
    </template> -->
<script>
    //局部组件
    const hello = {
        template: `<p>hello {{site}}</p>`,
        data() {
            return {
                site: 'php',
            }
        },
    }
    const vm = new Vue({
        el: '#app',
        components: {
            // myChild: {
            //     // template: `<p>hello {{site}}</p>`,
            //     template: '#hello',
            //     data() {
            //         return {
            //             site: 'php',
            //         }
            //     },
            // }
            //简化
            hello,
        }
    })
</script>
</body>

父组件向子组件传参

组件之间的数据传递是单向的，不允许在子组件中更新父组件中的数据

<body>
    <div id="app">
        <like :my-name='username' :my-count='count'></like>
    </div>
</body>
<script>
    const like = {
        props: ["myName", "myCount"],
        template: `
            <div>
                <button @click='num++'> 点赞:+{{num}}</button>
                <span> {{myName}} </span>
                </div>
        `,
        data() {
            return {
                num: this.myCount,
            }
        },
        // methods: {
        //     inc(n) {
        //         this.num += n;
        //     }
        // }
    }
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                username: '你好1',
                count: 0,
            }
        },
        components: {
            like
        }
    })
    console.log(vm.count);

子组件向父组件传参

子组件中更新父组件的数据是通过事件完成(子组件向父组件传参是通过声明同名事件来实现的)
$emit(‘父组件中要使用的方法名称’,子组件要传给父组件的值)

<body>
    <div id="app">
        <like :my-name='username' :my-count='count' @click-count='handle'></like>
    </div>
</body>
<script>
    const like = {
        props: ["myName", "myCount"],
        template: `
            <div>
                <button @click="$emit('click-count',10)" > 点赞:+{{myCount}}</button>
                <span> {{myName}} </span>
                </div>
        `,
    }
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                username: '你好1',
                count: 0,
            }
        },
        components: {
            like
        },
        methods: {
            handle(value) {
                console.log(this.count);
                this.count += value;
                this.username = 'admin'
            }
        }
    })
    console.log(vm.count);
</script>

组件之间双向传参

<!-- 模拟v-model指令的实现过程 -->
    <div id="demo">
        <input type="text" :value='value' @input.lazy="value=$event.target.value">
        <p>{{value}}</p>
    </div>
    <hr>
    <div id="app">
        <p>父组件：{{price}}元</p>
        <my-input :my-price='price' @input-text='handle'></my-input>
    </div>
<script>
    const vue = new Vue({
        el: '#demo',
        data() {
            return {
                value: 123
            }
        }
    })
    const myInput = {
        props: ["my-price"],
        // template: `
        // <input type="number" :value='myPrice' @input="$emit('input-text',$event.target.value)">
        // `,
        template: `
        <input type="number" :value='myPrice' @input="foo">
        `,
        methods: {
            foo(ev) {
                this.$emit('input-text', ev.target.value)
            }
        }
    }
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                price: 4999,
            }
        },
        components: {
            myInput
        },
        methods: {
            handle(value) {
                console.log(value);
                this.price = value;
            }
        }
    })
</script>

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

1209列表元素

2021-02-25 12:34:22