仅附一个vue传值小练习

生南星

发布于 2019-07-22 14:30:48

4720

发布于 2019-07-22 14:30:48

文章被收录于专栏：生南星

这是一个普通的兄弟间传值小练习,将inputs组件里输入的人员数据传入到它的兄弟组件addinfo里去,并添加删除功能.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习--信息添加</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <inputs></inputs>
        <addinfo></addinfo>
    </div>
    
    <template id="inputs">
        <fieldset>
            <legend><h3>信息添加</h3></legend>
            <span>姓名</span>: <input type="text" v-model="name" value="name"><br>
            <span>性别</span>: <input type="text" v-model="sex" value="sex"><br>
            <span>年龄</span>: <input type="text" v-model="age" value="age"><br>
            <button @click="sendinfo">添加</button>
        </fieldset>
    </template>
    <template id="addinfo">
        <fieldset>
            <legend><h3>信息展示</h3></legend>
            <ul>
                <li v-for="(v,i) in person1">
                    <span>姓名: {{v.name}}</span>
                    <span>性别: {{v.sex}}</span>
                    <span>年龄: {{v.age}}</span>
                    <button @click="deleteInfo(i)">删除</button>
                </li>
            </ul>
        </fieldset>
    </template>
    <script type="text/javascript">
        let totalVue = new Vue();
        
        let inputs = {
            template:'#inputs',
            data(){
                return {
                    name:'',
                    sex:'',
                    age:'',
                    input:[]
                }
            },
            methods: {
                sendinfo(){
                    let inputs={name:this.name,sex:this.sex,age:this.age};
                    this.input.push(inputs);
                    totalVue.$emit("inputs-event",this.input);
                }
            }
        };
        let addinfo = {
            template:'#addinfo',
            created(){
                totalVue.$on("inputs-event",this.getinputVal)
            },
            data(){
                return {
                    person1:''
                }
            },
            methods:{
                getinputVal(data){
                    console.log(data);
                    this.person1=data
                },
                deleteInfo(index){
                    this.person1.splice(index,1);
                }
            }
        };
        
        let app = new Vue({
           el:'#app',
           methods:{},
           components:{
               inputs,
               addinfo
           }
        });
</script>
</body>
</html>

这本是一个小练习,不值得拿出来单独写,但是以这个小练习为例,警醒自己注意关于双向绑定的一个小问题.

inputs组件里data返回的数据如果直接放进对象里会出现数据双向改变的问题,应该将拿到的数据以对象的形式添加到定义的input数组里面去,再进行数据的传递,详见51-53行

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-04-26，如有侵权请联系 cloudcommunity@tencent.com 删除

data