昆明建站网址,vps如何wordpress,客户网站建设问题,记事本做网站怎么改字体文章目录 1. 父组件向子组件进行传值父组件#xff1a;子组件#xff1a; 2. 子组件向父组件传值子组件#xff1a;父组件#xff1a; 3. 非父子组件进行传值公共bus.js组件A#xff1a;组件B#xff1a; 每次总结都是在加强一遍记忆 1. 父组件向子组件进行传值
父组件子组件 2. 子组件向父组件传值子组件父组件 3. 非父子组件进行传值公共bus.js组件A组件B 每次总结都是在加强一遍记忆 1. 父组件向子组件进行传值
父组件
templatediv父组件:input typetext v-modelnamebrbr!-- 引入子组件 --child :inputNamename/child/div
/template
scriptimport child from ./childexport default {components: {child},data () {return {name: }}}
/script子组件
templatediv子组件:span{{inputName}}/span/div
/template
scriptexport default {// 接受父组件的值props: {inputName: String,required: true}}
/script2. 子组件向父组件传值
子组件
templatediv子组件:span{{childValue}}/span!-- 定义一个子组件传值的方法 --input typebutton value点击触发 clickchildClick/div
/template
scriptexport default {data () {return {childValue: 我是子组件的数据}},methods: {childClick () {// childByValue是在父组件on监听的方法// 第二个参数this.childValue是需要传的值this.$emit(childByValue, this.childValue)}}}
/script父组件
templatediv父组件:span{{name}}/spanbrbr!-- 引入子组件 定义一个on的方法监听子组件的状态--child v-on:childByValuechildByValue/child/div
/template
scriptimport child from ./childexport default {components: {child},data () {return {name: }},methods: {childByValue: function (childValue) {// childValue就是子组件传过来的值this.name childValue}}}
/script3. 非父子组件进行传值
非父子组件之间传值需要定义个公共的公共实例文件bus.js作为中间仓库来传值不然路由组件之间达不到传值的效果。
公共bus.js
//bus.js
import Vue from vue
export default new Vue()组件A
templatedivA组件:span{{elementValue}}/spaninput typebutton value点击触发 clickelementByValue/div
/template
script// 引入公共的bug来做为中间传达的工具import Bus from ./bus.jsexport default {data () {return {elementValue: 4}},methods: {elementByValue: function () {Bus.$emit(val, this.elementValue)}}}
/script组件B
templatedivB组件:input typebutton value点击触发 clickgetDataspan{{name}}/span/div
/template
scriptimport Bus from ./bus.jsexport default {data () {return {name: 0}},mounted: function () {var vm this// 用$on事件来接收参数Bus.$on(val, (data) {console.log(data)vm.name data})},methods: {getData: function () {this.name}}}
/script
