1、子组件传参值
2、props接受传值
props表示类型三种方式:
1、单类型 表示接收的值为string类型
sonname: String
2、多类型 表示接受的值类型可以为string或number
sonname:[String,Number]
3、设置默认值 表示默认类型为String 默认值为张三
sonname:{
type:String,
// 设置默认值,这里没用到,在接口请求数据可能使用
// sonname:"张三"
}
3、使用接收到的值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <!-- 相当于父组件 --> <div id=‘father‘> <!-- 1、子组件传参值 --> <son sonname=‘李四‘></son> </div> <template id="son"> <div> 父组件 {{sonmsg}} <!-- 3、使用接收到的值 --> {{sonname}} </div> </template> <script> Vue.component(‘son‘, { template: ‘#son‘, // data使用返回值表示 data() { return { sonmsg: ‘父元素信息‘ } }, // 2、props接受传值 props: { // 1、单类型 表示接收的值为string类型 // sonname: String // 2、多类型 表示接受的值类型可以为string或number // sonname:[String,Number] // 3、设置默认值 sonname:{ type:String, // 设置默认值,这里没用到,在接口请求数据可能使用 // sonname:"张三" } } }) const vm = new Vue({ el: ‘#father‘, data: { }, methods: { }, }) </script> </body> </html>