Vue 学习第三天

通过 Prop 向子组件传递数据

 

<div id="app1">

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <componentest title="第一个" value="模板"></componentest>

    <componentest title="第二个" value="模板"></componentest>

    <componentest title="第三个" value="模板"></componentest>

    <componentest2 v-for="p in ps" v-bind:title="p.title" v-bind:value="p.value"></componentest2>

 

    <componentest3 v-for="p in ps2" v-bind:p="p" ></componentest3>

</div>

 

 

 

<script type="text/javascript">

    // 定义一个名为 button-counter 的新组件

    Vue.component('componentest', {

        props: ['title','value'],//属性可以有模板中汇入

        

       // template:'<button v-on:click="count++">一共点击了{{count}}次</button>'

       // template: '<input type="button" v-on:click="count++" :value="count">'

        template:'<h5>{{title}}{{value}}</h5>'

    })

    Vue.component('componentest2', {   //首先组件调用Data中的数据，然后汇入到组件的prop中，然后又在template中显示

        props:['title','value'],

        data: function () {

            return {count:0}

        },

        template:'<h5>{{title}}{{value}}</h5>'

    })

    Vue.component('componentest3', {    // 重构一下这个组件，让它变成接受一个单独的 post prop

        props: ['p'],                   // 关键点  v-for="p in ps2" v-bind:p="p"   绑定的属性是子 p，且props也是p  ,data是总的

        template:'<h5>{{p.classs}}{{p.title}}{{p.value}}</h5>'

    })

    new Vue({

        el: '#app1',

        data: {

            ps: [{ title: 'data导入1', value: '一' }, { title: 'data导入2', value: '二' }, { title: 'data导入3', value: '三' }],

            ps2: [{ classs: '第一', title: 'data导入1', value: '一' }, { classs: '第二', title: 'data导入1', value: '二' },{ classs: '第三', title: 'data导入1', value: '三' } ]

        }

    })

</script>

 

 

 

$emit(‘’)

<div id="app1">

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <emit-button v-on:welcome="sayhi"></emit-button>

</div>

 

 

 

<script type="text/javascript">

    Vue.component('emit-button', {

        template:'<div><button v-on:click="$emit(\'welcome\')">点击我</button></div>'

    })

    new Vue({

        el: '#app1',

        methods: {

            sayhi: function () {

                alert('hi');

            }

        }

    })

</script>

 

$emit(‘’,XXX) 传值

<div id="app1">

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <emit-button v-on:welcome="outerfunction"></emit-button>

</div>

 

 

 

<script type="text/javascript">

    Vue.component('emit-button', {

        data: function () {

            return {count:0}

        },

        template: '<div><button v-on:click="selffunction">点击我{{count}}</button></div>',

        methods: {

            selffunction: function () {

                this.count++;

                this.$emit('welcome', this.count);

            }

        }

    })

    //Vue.component('emit-button', {

    //    template: '<div><button v-on:click="sayhi2">点击我</button></div>',

    //    methods: {

    //        sayhi2: function () {

    //            alert("hi2");

    //        }

    //    }

    //})

    new Vue({

        el: '#app1',

        methods: {

            sayhi: function () {

                alert('hi');

            },

            outerfunction: function (value) {

                alert(value);

            }

        }

    })

</script>

 

 

更改父组件的属性值，实例，修改字体大小

<div id="app1" :style="{fontSize:postsize+'em'}">

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    我会变大哦！

    <bigsize v-on:makebig="makefontbigger"></bigsize>

</div>

 

 

 

<script type="text/javascript">// 目的是更改父组件的属性

    Vue.component('bigsize', {

        template: '<button v-on:click="selffunction">放大</button>',

        methods: {

            selffunction: function () {

                this.$emit('makebig')

            }

        }

    })

 

    new Vue({

        el: '#app1',

        data: {

            postsize: 1

        },

        methods: {

            makefontbigger: function () {

                this.postsize += 0.1;

            }

        }

    })

</script>