Flutter和Vue都是非常流行的前端框架，在開發過程中，組件起著非常重要的作用。本文將介紹Flutter和Vue中組件的寫法。

Flutter中的組件非常有特色，能夠實現非常豐富的交互效果，下面是一個簡單的例子：

class FancyButton extends StatefulWidget {
final VoidCallback onPressed;
final Widget child;
FancyButton({@required this.onPressed, @required this.child});
@override
_FancyButtonState createState() =>_FancyButtonState();
}
class _FancyButtonState extends State{
bool _isPressed = false;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTapDown: (_) =>setState(() =>_isPressed = true),
onTapUp: (_) =>setState(() =>_isPressed = false),
onTap: widget.onPressed,
child: AnimatedContainer(
duration: Duration(milliseconds: 150),
decoration: BoxDecoration(
color: _isPressed ? Colors.red[900] : Colors.red,
borderRadius: BorderRadius.circular(24),
boxShadow: [
BoxShadow(
color: Colors.red[100],
blurRadius: 10.0,
offset: Offset(0, 5),
),
],
),
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: widget.child,
),
);
}
}

上述代碼實現了一個有動畫效果的組件，包含了滑動效果，點擊效果以及陰影效果。

Vue中的組件也十分簡潔，下面是一個簡單的例子：

// 定義組件
Vue.component('my-component', {
template: '
A custom component!
'
})
// 實例化app
new Vue({
el: '#app'
})

通過Vue.component方法，我們可以定義一個組件，但是這并沒有什么效果，需要在初始化Vue實例之前調用。

下面是調用Vue組件的代碼：

上述代碼指定了調用的Vue組件，這樣就可以在界面上顯示組件內容了。

總的來說，Flutter和Vue中的組件寫法都非常簡潔，但是Flutter中的組件更加靈活，可以實現更加精彩的交互效果。