Vueにおける変数の理解について

Vueにおける変数の理解について

Vueの変数を定義する方法

dataで

を定義する

Propsを介して

に転送

computed中

Vueの変数はどのように定義できますか?
vueの変数を使用する前に定義する必要がありますが、ここでは考えられる方法を挙げます.
dataで定義する

<script>
export default {
	data() {
		return {
			var1: ''	//              
		}
	}
}
</script>

Props経由で転送
現在のコンポーネントがサブコンポーネントである場合、propsで親コンポーネントの変数を取得できます.

<script>
export default {
	props: {
		var2: {
			type: String,
			default : ''
		},
		var3: {
			type: Boolean
		}
	}
}
</script>

computed中
computedで取得された変数は、次の2つの部分に分けられます.

は、既存変数を処理する、新しい変数

を生成する.

Vuexのstate/gettersで定義された変数

を取得する

//        ：
<script>
export default {
	props： {
		var5: Boolean
	},
	data() {
		return {
			var4: ''
		}
	},
	computed: {
		var44() {
			return this.var4 + 'var44'
		},
		var55() {
			return !this.var5
		}
	}
}
</script>

//        ：
<script>
import { mapState,mapGetters } from 'vuex'
export default {
	data() {
		return {}
	},
	computed: {
		...mapState(['var6']),	//      state     var6
		...mapGetters(['var7']),	//      getters     var7 
		// getters    state    ，      data     computed         
	}
}
</script>