vue组件出现的一些问题和传值

1.创建局部组件出现的问题

 

问题一
报错：Component template should contain exactly one root element. If you are using v-if on multiple elemen
原因：没有将组件模板包含在一个div中
<template id="tone">
        <h2>props: {{ da }}</h2>
        <h2>data:{{dda}}</h2>
        <input type="text" v-model="dda" />
</template>
  
解决：
<template id="tone">
    <div>
        <h2>props: {{ da }}</h2>
        <h2>data:{{dda}}</h2>
        <input type="text" v-model="dda" />
    </div>
</template>

问题二
报错：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "da"

<template id="tone">
    <div>
        <h2>props: {{ da }}</h2>
        <h2>data:{{dda}}</h2>
        <input type="text" v-model="da" />
    </div>
</template>

 <script>
    const app = new Vue({
        el:'#constain',
        data:{
            num:0
        },
        components:{
            mycm:{
                template:'#tone',
                props:{
                    da:Number
                }

            }
        }

    });
</script>‘

 

原因：在vue中使用v-model不应该直接双向绑定props中数据，props主要用于接收父组件传递的数据或父组件操控子组件数据，若子组件直接对其修改，容易和父组件产生冲突引发问题；
解决办法：

使用data方法
<template id="tone">
    <div>
        <h2>props: {{ da }}</h2>
        <h2>data:{{dda}}</h2>
        <input type="text" v-model="dda" />
    </div>
</template>

 <script>
    const app = new Vue({
        el:'#constain',
        data:{
            num:0
        },
        components:{
            mycm:{
                template:'#tone',
                props:{
                    da:Number
                },
                data(){
                    return{
                        dda:this.da
                    }
                }
            }
        }
    });
</script>
 

2.子组件向父组件传值
  
    上面说到，vue中不推荐直接在子组件中修改props中的数据，我们可以通过data方法解决这个问题，也可以给父组件传值实现。给父组件传值，可以使用$emit()方法，第一个参数是一个触发函数名称，第二个参数是向父组件传递的参数：

 

<div id="constain">
    <h2>父data：{{num}}</h2>
    <mycm :da=num  @number='number'></mycm>
</div>

<template id="tone">
    <div>
        <h2>子props: {{ da }}</h2>
        <h2>子data:{{dda}}</h2>
        <input type="text" :value='da' @input='cNumber'/>  //给输入框添加输入事件
    </div>
</template>

<script>
    const app = new Vue({
        el:'#constain',
        data:{
            num:0
        },
        methods:{
            number(value){
                this.num = Number(value);              //这里需要转换为int类型，因为emit传过来的数据是String类型
            }
        },
        components:{
            mycm:{
                template:'#tone',
                props:{
                    da:Number
                },
                data(){
                    return{
                        dda:this.da
                    }
                },
                methods:{
                    cNumber(event){
                        this.dda = event.target.value; //更新子组件中data中的值
                        this.$emit("number",this.dda); //通过emit设置触发函数的名称和发送的数据    
                    }
                }
            }
        }
    });
</script>