Vue - props屬性
阿新 • • 發佈:2021-09-13
目錄
- End -
﹀
﹀
﹀
夢想是鹹魚
關注一下吧
以上為本篇文章的主要內容,希望大家多提意見,如果喜歡記得點個推薦哦
作者:Maggieq8324
出處:https://www.cnblogs.com/maggieq8324/
本文版權歸作者和部落格園共有,歡迎轉載,轉載時保留原作者和文章地址即可。
前言
props
用於接收來自父元件的資料
具體應用
基本使用
App.vue
<template> <Test :url="url"/> </template> <script> import Test from './components/test.vue' export default { name: 'App', components: { Test }, data: function () { return { url: './assets/home/theme6.jpg' } } } </script>
test.vue
export default {
name: 'test',
props: ['url'],
mounted () {
console.log('url:' + this.url)
}
}
確定型別
props
屬性傳值時需要注意使用v-bind
指令確定型別App.vue
<Test :url="url"
:num="1"
:flag="true"
flag1 />
test.vue
export default { name: 'test', // props: ['url'], props: { url: { type: String, default: '' }, num: { type: Number }, flag: { type: Boolean }, flag1: { type: Boolean } }, mounted () { console.log('url: ' + this.url) console.log('num: ' + this.num) console.log('flag: ' + this.flag) console.log('flag1: ' + this.flag1) // 預設為true } } </script>