Vue-父子传值-与-子父传值

利用 props 父子传值

<div id=”app”>
父组件，可以在引用子组件的时候，通过 属性绑定（v-bind:）的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用

<com1 v-bind:parentmsg="msg"></com1>

</div>
<script>
创建 Vue 实例，得到 ViewModel

var vm = new Vue({
  el: '#app',
  data: {msg: '123 啊 - 父组件中的数据'},
  methods: {},
  components: {
  * 结论：经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法 *
    com1: {data() { 
      ** 注意：子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如：子组件通过 Ajax，请求回来的数据，都可以放到 data 身上；**
         *data 上的数据，都是可读可写的；*
        return {
          title: '123',
          content: 'qqq',
          ** 简单数据类型这样就可修改传过来的值 **
           forSon: this.parentmsg,
           
           ** 复杂数据类型更改的话，会和父元素的 data 数据一起更改，因为引用的是一个内存地址，使用数据深拷贝可以实现更改数据不影响父级数据 **
           foruser:JSON.parse(JSON.stringify(this.parentuser))
        }
      },
      template: '<h1 @click="change"> 这是子组件 --- {{parentmsg}}</h1>',
    * 注意：组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的 *
      *props 中的数据，都是只读的，无法重新赋值 *
      props: ['parentmsg'], 
      * 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据 *
      directives: {},
      filters: {},
      components: {},
      methods: {change() {this.parentmsg = '被修改了'}
      }
    }
  }
});

</script>

利用 $emit 子父传值

<div id=”app”>
父组件向子组件 传递 方法，使用的是 事件绑定机制；v-on, 当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了
func 是一个自定义的事件 –

<com2 @func="show"></com2>

</div>

<template id=”tmpl”>

<div>
  <h1> 这是 子组件 </h1>
  <input type="button" value="这是子组件中的按钮 - 点击它，触发 父组件传递过来的 func 方法" @click="myclick">
</div>

</template>

<script>

定义了一个字面量类型的 组件模板对象

var com2 = {
  template: '#tmpl', 
  ** 通过指定了一个 Id, 表示 说，要去加载 这个指定 Id 的 template 元素中的内容，当作 组件的 HTML 结构 **
  data() {
    return {sonmsg: { name: '小头儿子', age: 6}
    }
  },
  methods: {myclick() {
      ** 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？**
        **emit 英文原意：是触发，调用、发射的意思 **
      // this.$emit('func123', 123, 456)
      this.$emit('func', this.sonmsg)
    }
  }
}


// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {datamsgFormSon: null},
  methods: {show(data) {// console.log('调用了父组件身上的 show 方法: ---' + data)
      // console.log(data);
      this.datamsgFormSon = data
    }
  },

  components: {
    com2
    // com2: com2
  }
});

</script>
</body>

provide / inject 实现父子传值

在一个祖先组件中 传递一个数据 让所有的子孙后代组件共享 可以隔代传递

 **provide 和 inject 主要为高阶插件 / 组件库提供用例。并不推荐直接用于应用程序代码中。这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。**
    
<div id="app">
    <h1> 我在 vm 实例中显示这个数据 ------{{msg}}</h1>
    <son></son>
</div>
<template id="sonTem">
    <div>
        <h1> 我在直接子组件中显示这个数据 ---{{sayhi}}---{{sonmsg}}</h1>
        <sondeson></sondeson>
    </div>
</template>
<template id="sondeson">
    <div>
        <h1> 我在直接孙子组件中显示这个数据 ---{{sayhi}}---{{sondesonmsg}}</h1>
    </div>
</template>
<script>
    // 孙子组件
    var sondeson = {
        template: '#sondeson', 
        inject:["sayhi"],
        data() {
            return {sondesonmsg:'孙子'}
        }
    }
    // 儿子组件
    var son = {
        template: '#sonTem', 
        data() {
            return {sonmsg:'儿子'}
        },
        inject:["sayhi"],
        components:{sondeson}
    }
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '我是根组件的数据',
            sayhi:'你好'
        },
       **provide 选项应该是一个对象或返回一个对象的函数 **
       **provide 如果要传递 data 上的数据 那么 provide 要写成一个返回对象的函数 类似于 组件中的 data**
        // provide:{
        //     sayhi: this.sayhi
        // },
        provide(){
            return {sayhi:this.sayhi}
        },
          **provide 可以实现类似于 vuex 的效果 **
        // provide(){
        //     return {
        //         app:this
        //     }
        // },
        components:{son}
    })
</script>
**provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。**

利用 $hrefs 实现子父传值

在组件中 可以给组件的成员 (元素，子组件) 上添加 ref 来获得组件中的成员
这样可以在父组件中直接获取添加了 ref 属性的 子组件的对象 从而可以直接点出 子组件上的 data 数据与 methods
也可以获取到添加了 ref 属性的元素对象

<div id=”app”>

<input type="button" value="获取元素" @click="getElement" ref="mybtn">
<h3 id="myh3" ref="myh3"> 哈哈哈，今天天气太好了！！！</h3>
<hr>
<login ref="mylogin"></login>

</div>
<script>

var login = {
  template: '<h1> 登录组件 </h1>',
  data() {
    return {msg: 'son msg'}
  },
  methods: {show() {console.log('调用了子组件的方法')
    }
  }
}

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {},
  methods: {getElement() {// console.log(document.getElementById('myh3').innerText)
      **this.$refs 来获取元素和组件 **
    **ref  是 英文单词【reference】值类型 和 引用类型  referenceError**
      // console.log(this.$refs.myh3.innerText)

      // console.log(this.$refs.mylogin.msg)
      // this.$refs.mylogin.show()}
  },
  components: {login}
});

</script>

利用 $parent 父子传值 与利用 $children 子父传值

指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。
节制地使用 $parent 和 $children – 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信

    <div id="app">
        <h1>{{msg}}</h1>
        <com1></com1>
        <com2></com2>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {msg:'我是父组件中的数据',},
            mounted(){
                this.$children.forEach(item=>{console.log(item.name)
                })
            },
            components:{
                com1:{data(){
                     return{
                              name:'我是 1',
                              title:'我是 1 号组件'
                        }
                    },
                    template:'<h1>{{title}}===={{$parent.msg}}</h1>'
                },
                com2:{data(){
                        return{
                            name:'我是 2',
                            age:18
                        }
                        
                    },
                    template: '<h1>{{age}}==={{$parent.msg}}</h1>'
                }

            }
        })
    </script>