Vue案例：组件之间的传值问题

案例最终效果如下：

主要解决父子组件之间的传值，以及子组件如何"修改"父组件data的问题。主要代码片段如下：

<!-- 父组件 -->
<div id="app"><cpn :number1="num1":number2="num2"@num1change="num1change"@num2Change="num2Change"/>
</div>
<!-- 子组件 -->
<template id="cpn"><div><h2>props:{{number1}}</h2><h2>data:{{dnumber1}}</h2><!-- <input type="text" v-model="dnumber1"> --><input type="text" :value="dnumber1" @input="num1Input"><h2>props:{{number2}}</h2><h2>data:{{dnumber2}}</h2><!-- <input type="text" v-model="dnumber2"> --><input type="text" :value="dnumber2" @input="num2Input"></div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({el:'#app',data(){return{num1:1,num2:2}},components:{cpn:{template:"#cpn",props:{number1:Number,number2:Number},data(){return{dnumber1: this.number1,dnumber2: this.number2}},methods:{num1Input(event){this.dnumber1= event.target.value;this.$emit('num1change',this.dnumber1)},num2Input(event){this.dnumber2 = event.target.value;this.$emit('num2change',this.dnumber2)}}}},methods:{num1change(num){this.num1 = parseInt(num);},num2Change(num){this.num2 = parseInt(num);}}
})
</script>

Vue案例：组件之间的传值问题相关推荐

vue兄弟组件之间的传值，bus运用，beforeDestroy销毁，Bus.$off
vue兄弟组件之间的传值 1.建立一个单独的文件bus.js import Vue from 'vue' export default new Vue() 2.传递事件 // 传递事件 import ...
Vue父子组件之间的传值
1.vue是如何进行父子组件之间的传值的 a.父子组件之间通过props b.子父组件之间通过$emit 2.简单demo描述父组件包含一个点击按钮,用于改变子组件的显示与隐藏: 子组件只有一 ...
vue之组件之间的传值
1.父组件向子组件传值 //parent.vue <template> <div> <child :send-msg-to-child="toChildMsg& ...
vue父子组件之间的传值，及互相调用父子组件之间的方法
场景:父子组件之间的传值方法,以及调用他们的内部的方法 *** 父组件给子组件传值是通过属性绑定的方法 *** 子组件给父组件传值是通过绑定对应的方法将自身的值传递给父 ...
VUE父子组件之间的传值，以及兄弟组件之间的传值；
一.Vue父子组件之间传值 vue使用中,经常会用到组件,好处是: 1.如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了: 2.页面内容会简洁一些:方便管控: 子组件的传值是通过p ...
vue 兄弟组件之间的传值
1. 定义一个公共的bus.js //bus.js import Vue from 'vue' export default new Vue() 2. 在子组件A里用$emit发射数据 <scr ...
vue 父子组件之间的传值
1.父子组件传值(父组件传值给子组件需要子组件用props接收值) 父传子:当子组件作为标签在父组件中使用的时候(子组件不可修改父组件传过来的值) 传递:需要在子组件标签上用v-bind(或者:)来 ...
vue、bus 使用遇到的坑，组件之间无法传值；vue、bus 第一次获取不到值，后面再点击重复执行
vue.bus 使用遇到的坑,组件之间无法传值:vue.bus 第一次获取不到值,后面数据叠加问题定位: 出现无法传值的情况,检查传值过程中组件是否还没有渲染:可能出现的情况是:组件被if,在你使用 ...
vue父子组件及非父子组件之间的传值
一.父组件向子组件传值在vue中通常使用props向子组件传递数据 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props,然后 ...

Vue案例：组件之间的传值问题

Vue案例：组件之间的传值问题相关推荐

最新文章

热门文章