Vue 常用三种传值方式
Vue常用的三种传值方式：
-
父传子
-
子传父
-
非父子传值
引用官网一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。
1. 父组件向子组件传值：
父组件：
1 <template> 2 <div> 3 父组件: 4 <input type="text" v-model="name"> 5 <br> 6 <br> 7 <!-- 引入子组件 --> 8 <child :inputName="name"></child> 9 </div> 10 </template> 11 <script> 12 import child from './child' 13 export default { 14 components: { 15 child 16 }, 17 data () { 18 return { 19 name: '' 20 } 21 } 22 } 23 </script>
子组件：
1 <template> 2 <div> 3 子组件: 4 <span>{{inputName}}</span> 5 </div> 6 </template> 7 <script> 8 export default { 9 // 接受父组件的值 10 props: { 11 inputName: String, 12 required: true 13 } 14 } 15 </script>
2. 子组件向父组件传值：
子组件：
1 <template> 2 <div> 3 子组件: 4 <span>{{childValue}}</span> 5 <!-- 定义一个子组件传值的方法 --> 6 <input type="button" value="点击触发" @click="childClick"> 7 </div> 8 </template> 9 <script> 10 export default { 11 data () { 12 return { 13 childValue: '我是子组件的数据' 14 } 15 }, 16 methods: { 17 childClick () { 18 // childByValue是在父组件on监听的方法 19 // 第二个参数this.childValue是需要传的值 20 this.$emit('childByValue', this.childValue) 21 } 22 } 23 } 24 </script>
父组件：
1 <template> 2 <div> 3 父组件: 4 <span>{{name}}</span> 5 <br> 6 <br> 7 <!-- 引入子组件 定义一个on的方法监听子组件的状态--> 8 <child v-on:childByValue="childByValue"></child> 9 </div> 10 </template> 11 <script> 12 import child from './child' 13 export default { 14 components: { 15 child 16 }, 17 data () { 18 return { 19 name: '' 20 } 21 }, 22 methods: { 23 childByValue: function (childValue) { 24 // childValue就是子组件传过来的值 25 this.name = childValue 26 } 27 } 28 } 29 </script>
3. 非父子组件传值：
非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。
公共 bus.js
1 //bus.js 2 import Vue from 'vue' 3 export default new Vue()
组件A:
1 <template> 2 <div> 3 A组件: 4 <span>{{elementValue}}</span> 5 <input type="button" value="点击触发" @click="elementByValue"> 6 </div> 7 </template> 8 <script> 9 // 引入公共的bug，来做为中间传达的工具 10 import Bus from './bus.js' 11 export default { 12 data () { 13 return { 14 elementValue: 4 15 } 16 }, 17 methods: { 18 elementByValue: function () { 19 Bus.$emit('val', this.elementValue) 20 } 21 } 22 } 23 </script>
组件B:
1 <template> 2 <div> 3 B组件: 4 <input type="button" value="点击触发" @click="getData"> 5 <span>{{name}}</span> 6 </div> 7 </template> 8 <script> 9 import Bus from './bus.js' 10 export default { 11 data () { 12 return { 13 name: 0 14 } 15 }, 16 mounted: function () { 17 var vm = this 18 // 用$on事件来接收参数 19 Bus.$on('val', (data) => { 20 console.log(data) 21 vm.name = data 22 }) 23 }, 24 methods: { 25 getData: function () { 26 this.name++ 27 } 28 } 29 } 30 </script>
每日壹题：
打印出 1 - 10000 之间的所有对称数
1 console.log([...Array(10000).keys()].filter((x) => { 2 return x.toString().length > 1 && x === Number(x.toString().split('').reverse().join('')) 3 }))
