Vue父子组件传递 Vue中父子组件的值传递与方法传递
WanGqD 人气:2想了解Vue中父子组件的值传递与方法传递的相关内容吗,WanGqD在本文为您仔细讲解Vue父子组件传递的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vue父子组件传递,Vue,父子组件值传递,Vue,父子组件方法传递,下面大家一起来学习吧。
一.Vue中父组件向子组件传值
利用v-bind向子组件传值,子组件中利用props接受
<div id="app"> <father></father> </div> <template id="father"> <div> <!--注意点: 组件是可以使用自己的数据的--> <p>{{name}}</p> <p>{{age}}</p> <!--这里将父组件的name通过parentname传递给了子组件--> <son :parentname="name" :abc="age"></son> </div> </template> <template id="son"> <div> <!--这里通过parentname使用了父组件传递过来的数据--> <p>{{parentname}}</p> <p>{{abc}}</p> </div> </template> <script> // 父组件 Vue.component("father", { template: "#father", data: function(){ return { name: "wqd", age: 21 } }, // 子组件 components: { "son": { template: "#son", //这里通过parentname接收了父组件传递过来的数据 props: ["parentname", "abc"] } } }); // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { }, }); </script>
二.Vue中父组件向子组件传递方法
父组件利用v-on传值,子组件this.$emit来接收
<div id="app"> <father></father> </div> <template id="father"> <div> <button @click="say">我是按钮</button> <!--这里通过parentsay将父组件的say方法传递给了子组件--> <son @parentsay="say"></son> </div> </template> <template id="son"> <div> <button @click="sonFn">我是按钮</button> </div> </template> <script> // 父组件 Vue.component("father", { template: "#father", methods: { say(){ console.log("helloworld") } }, // 子组件 components: { "son": { template: "#son", /* 注意点: 和传递数据不同, 如果传递的是方法, 那么在子组件中不需要接收,需要在子组件自定义的方法中通this.$emit("自定义接收的名称")的方法来触发父组件传递过来的方法 */ // props: ["parentsay"] methods: { sonFn(){ this.$emit("parentsay"); } } } } }); // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { }, }); </script>
三.Vue中子组件向父组件传值
this.$emit中第一个参数为接收父组件传递的方法,第二个参数即为向父组件传递的值
<div id="app"> <father></father> </div> <template id="father"> <div> <button @click="say">我是按钮</button> <!--这里通过parentsay将父组件的say方法传递给了子组件--> <son @parentsay="say"></son> </div> </template> <template id="son"> <div> <button @click="sonFn">我是按钮</button> </div> </template> <script> // 父组件 Vue.component("father", { template: "#father", methods: { //data用来接受子组件传递的值 say(data){ console.log(data); } }, // 子组件 components: { "son": { template: "#son", methods: { sonFn(){ // 第一个参数: 需要调用的函数名称 // 后续的参数: 给调用的函数传递的参数 this.$emit("parentsay", "你好"); } } } } }); // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { }, }); </script>
加载全部内容