关于vue里面组件的参数问题

Question

就比如说一个很简单的一个父组件控制自组件显示隐藏的问题，这里有两种方法：
1，父组件定义子组件显示隐藏的参数，然后 .sync 传进去，在子组件里面通过 prop 拿到父组件传过来的参数来控制显示隐藏，那么我在父组件里面控制参数的改变就可以控制子组件的显示隐藏。
2，父组件不定义，在子组件里面定义显示隐藏的参数，通过子组件里面定一个 show 的方法去改变这个值，然后要用的时候父组件使用 ref 来调用这个方法控制子组件显示隐藏。
这个问题现在我是在父组件定义的参数太多，感觉有点乱，所以就有点偏向于第二种，请求大佬指点一下这两种方法的利弊。

Answer 1

你好我也是刚刚在学Vue但是对于你的问题我目前还不知道
这边请教一个问题
JS:

Vue.component('Father', {
    template: '#father',
    data(){
      return {money:1000}
    },
  });
  new Vue({
    el: '.app',
  })

html:

<div class="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3>66</h3>
    </div>
  </template>

---

我的问题是

1. template给ID没有问题 ,但是给class= "father"就报错, 为什么?
2. 为什么el给class选择器不报错

Answer 2

如果父组件和子组件仅有一个show的true/false这样的值要传，其实两者之间并无哪种更好的说法，但换个场景假如父组件给子组件传两个值，一个是show，另一个是url之类的其他不限于Boolean值的类型，这种情况下，props就不好用了，因为假如你两次传递的url相同，子组件在第二次就接收不到