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>