组件：子传父对话框小练习

把子组件中的数据传递到父组件中
例：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子给父传值</title>
 </head>
 <body>
 <div class="itany">
   <father></father>
 </div>
<script src="./vue.js"></script>
<script>
    Vue.component('father',{
        template:`
            <div>
                <h1>{{num2}}</h1>
                <child @meth='the'></child>
            </div>
        `,
        data:function(){
            return{
                num2:''
            }
        },
        methods:{
            the:function(txt){
                this.num2=txt
            }
        }
    })
    Vue.component('child',{
        template:`
            <button @click="show">传给父元素</button>
        `,
        data:function(){
            return{
                num:'我是子组件，我要传值给父组件'
            }
        },
        methods:{
            show:function(){
                this.$emit('meth',this.num)
            }
        }
    })
    new Vue({
        el:'.itany'
    })
    </script>
</body>
</html>

12041882-55005438ebec8c8b.png

注释：点击按钮时，就会弹出父组件传给子组件的数据

练习1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子给父传值练习</title>
</head>
<body>
 <div class="itany">
   <father></father>
</div>
<script src="vue.js"></script>
<script>
    Vue.component('father',{
        template:`
            <div>
                <h1>我是父元素</h1>
                <p>请传值<b>{{mess}}</b></p>
                <child @show="the"></child>
            </div>
        `,
        data:function(){
            return{
                mess:""
            }
        },
        methods:{
            the:function(txt){
                this.mess=txt
            }
        }
    })
    Vue.component('child',{
        template:`
            <div>
                <h1>我是子元素</h1>
                <input type="text" v-model="arr">
                <button @click="add">传值</button>
            </div>
        `,
        data:function(){
            return{
                arr:""
            }
        },
        methods:{
            add:function(){
                this.$emit('show',this.arr)
            }
        }
    })
    new Vue({
        el:'.itany'
    })
    </script>
</body>
</html>

12041882-7b461f24cb046ffa.png

注释：可以把子组件中input的value传递到父组件的p标签中去
练习2：制作一个聊天对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对话框</title>
</head>
<body>
<div class="itany">
    <father></father>
</div>
<script src="vue.js"></script>
<script>
    Vue.component('father', {
        template: `
            <div>
                <ul>
                    <li v-for="(value,index) in one">{{value}}</li>
                </ul>
            <child @show="the" userName='jack'></child>
            <child @show="the" userName='roce'></child>
            </div>
        `
        , data: function () {
            return {
                one:[]
            }
        }
        , methods: {
            the: function (txt) {
                this.one.push(txt)
            }
        }
    })
    Vue.component('child', {
        props:['userName'],
        template: `
            <div>
                <label>{{userName}}</label>
                <input type="text" v-model="arr">
                <button @click="add">发送</button>
            </div>
        `
        , data: function () {
            return {
                arr: ''
            }
        }
        , methods: {
            add: function () {
                this.$emit('show',this.userName+':'+this.arr);
                this.arr=""
            }
        }
    })
    new Vue({
        el: ".itany"
    })
    </script>
</body>
</html>

点击前：

12041882-5f528891b9ce931a.png

点击后：

12041882-f8651d0a28026603.png

组件：子传父 对话框小练习

推荐阅读更多精彩内容

组件：子传父对话框小练习