大家好，欢迎来到IT知识分享网。
一、父组件向子组件传值
首先父组件发送的形式是用bind绑定值到子组件身上，然后子组件数props属性接收
<body> <div id="app"> <!-- 父组件，可以在引用子组件的时候，通过属性绑定的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 --> <com1 :parentmsg="msg"></com1> </div> </body> </html> <script> var vm = new Vue({ el: "#app", data: { msg: "这是父组件中的数据" }, methods: {}, components: { com1: { data() { // return { // title: "123", // content: "qqq" // } }, template: '<h1 @click="change">这是子组件 --- {{parentmsg}}</h1>', props: ['parentmsg'], // directives: {}, // filters: {}, // components: {}, // methods: { // change() { // this.parentmsg = "被修改了" // } // } } } }) </script>
二、子组件向父组件传值
<body> <div id="app"> <com2 @func="show"></com2> </div> </body> <template id="tmpl"> <h1>这是子组件</h1> <h4>点击按钮获取从父组件传过来的 func 方法</h4> <input type="button" value="点击" @click="myclick"> </template> </html> <script> var com2 = { template: '#tmpl', methods: { myclick() { this.$emit('func', this.sonmsg) } } } var vm = new Vue({ el: "#app", data: { datamsgFormSon: null }, methods: { show(data) { this.datamsgFormSon = data } }, components: { com2: com2 } }) </script>
三、非父子之间传值(兄弟组件传值)
<body> <div id="app"> <zs></zs> <ls></ls> </div> </body> </html> <script> var bus = new Vue(); Vue.component("zs", { template: '<div>这是张山<button @click="sb">传值</button></div>', methods: { sb() { bus.$emit("tt", { name: "我是zs" }); } } }); Vue.component("ls", { template: "<div>我是ls</div>", created() { bus.$on("tt", function(data) { console.log(data); }); } }); </script>
三、通过Vuex状态管理传值
1.通过npm加载vuex，创建store.js文件，然后在main.js中引入，store.js文件代码如下：
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); const state = { author:'Wise Wang' }; const mutations = { newAuthor(state,msg){ state.author = msg } } export default new Vuex.Store({ state, mutations })
2.父组件parent代码如下：
<template> <div class="parent"> <h2>{{ msg }}</h2> <p>父组件接手到的内容：{{ username }}</p> <input type="text" v-model="inputTxt"> <button @click="setAuthor">传参</button> <son psMsg="父传子的内容:叫爸爸" @transfer="getUser"></son> </div> </template> <script> import son from './Son' export default { name: 'HelloWorld', data () { return { msg: '父组件', username:'', inputTxt:'' } }, components:{son}, methods:{ getUser(msg){ this.username= msg }, setAuthor:function () { this.$store.commit('newAuthor',this.inputTxt) } } } </script>
3.子组件son代码如下：
<template> <div class="son"> <p>{{ sonMsg }}</p> <p>子组件接收到内容：{{ psMsg }}</p> <p>这本书的作者是：{{ $store.state.author }}</p> <!--<input type="text" v-model="user" @change="setUser">--> <button @click="setUser">传值</button> </div> </template> <script> export default { name: "son", data(){ return { sonMsg:'子组件', user:'子传父的内容' } }, props:['psMsg'], methods:{ setUser:function(){ this.$emit('transfer',this.user) } } } </script>
四、bus总线传值
思路：在Vue的原型上创建一个属性bus，该属性的值为new Vue（），即bus也是一个vue实例
第一步：在main.js中创建bus总线,类似公共变量的方式。
第二步：在子组件A中，通过bus总线抛出信息和值。this.bus就是Vue实例，$emit也是上面的方法
第三步：在子组件B中，在created或mounted等生命周期函数上，监听那个事件和获取那个值。
注意：bus总线，是联动的，当A组件触动bus总线的时候，B组件中也会响应式的触发。
B组件中的bus，需要在函数中，比如：created函数、mounted函数、甚至是data函数。
data中：
生命周期函数中：
总之，监听bus总线的事件，必须要函数中，但是该函数执行的时候，跟bus总线无关。
路由组件中：两个组件不在一个页面，bus总线即使改变了值，当点击另一个路由路径的时候，data函数又将值初始化了，
所以说，bus总线作用的两个组件应该在同一页面中。当然，可以用一个仓库来存储这个改变的值，比如：vuex、webStorage、数据库等等。
例如：bus在vuex中使用：
A组件：
methods: { handleClick () { this.bus.$emit('busEvent', this.loginFlag) //1、发出“事件和值” } },
B组件：
<script> export default { data () { return { busValue: this.$store.state.login ,//(2)从store中获取该值 } }, methods: { handleClick () { console.log(this.busValue) } }, created () { var localValue; this.bus.$on('busEvent', res => { localValue = res//当bus触发时，这里生效，将busValue值修改了， //但是，当点开该页面路由组件的时候，data函数初始化了busValue值 this.$store.state.login = res; //(1)将该值存在store中 }) } } </script>
但是，还是有问题：当用户未点击过B路由组件前，点击A路由组件不会触发bus总线，因为，B组件的代码根本没有加载过来。
现在就出现了这种情况：A已经触发了bus总线，B不能监听到bus总线。
所以说，A、B组件还是在一个页面时，可以使用bus总线。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/31088.html
