vue.js之父子组件的访问方式

一、父组件访问子组件时，使用2种方法。

1、$children，获取该子组件下所有内容，子组件使用几次，就获取几次

2、$refs获取的是对象类型，默认是一个空对象，只获取子组件上带属性 ref=’’ 的子组件的内容。

示例：

	  <!--父组件-->
	  <div id="app">
      <cpn></cpn>
      <!--子组件带属性ref=''，配合$refs使用-->
      <cpn ref="abc"></cpn>
      <cpn></cpn>
      <button @click="btnClick">点击获取</button>
	  </div>

	  <!--子组件-->
	  <template id="childTemp">
	    <div>
        <h2>我是子组件</h2>
	    </div>
	  </template>
	  <script>
	  	const app = new Vue({
	  		el: '#app',
	  		data: {
	  			msg: '欢迎使用Vue.js'
	  		},
       	    methods: {
	  			btnClick() {
				// 父直接获取子组件里面的属性、方法等内容的方式：
	            // 1、$children 
				// console.log(this.$children[0].childMsg);
			    // console.log(this.$children[0].childFunc);
	
			    // 2、$refs
			    console.log(this.$refs);
			    console.log(this.$refs.abc.childMsg);
		  }
        },
	      components: {
		      cpn: {
		      	template: '#childTemp',
	            data() {
		      		return {
		      			childMsg: '我是子组件的信息'
              }
            },
            methods: {
			      childFunc() {
			      console.log('我是子组件的方法');
		      }
            }
          }
	      }
	  	})
	  </script>

一、子组件访问父组件时，使用2种方法。

1、$parent获取该组件的父组件

2、$root获取根组件

示例：

<!--根组件-->
  <div id="app">
    <cpn></cpn>
  </div>

  <!--第一层子组件,父级为根组件-->
  <template id="childTemp">
    <div>
      <h2>我是第一层子组件</h2>
      <ccpn></ccpn>
    </div>
  </template>

  <!--最后一层子组件,父级为cpn组件-->
  <template id="cTemp">
    <div>
      <h2>我是最后一层子组件</h2>
      <button @click="btnParentClick">点击获取父组件内容</button>
      <button @click="btnRootClick">点击获取根组件内容</button>
    </div>
  </template>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        msg: '欢迎使用Vue.js'
      },
      components: {
        cpn: {
          template: '#childTemp',
          data() {
            return {
              childMsg: '我是子组件的信息'
            }
          },
          methods: {
            childFunc() {
              console.log('我是子组件的方法');
            }
          },
          components: {
          	ccpn: {
		          template: '#cTemp',
		          methods: {
			           btnParentClick() {
				          // 1、$parent获取该组件的父组件
				           console.log(this.$parent);
		           },
			            btnRootClick() {
				           // 2、$root获取根组件
				           console.log(this.$root);
			             }
		          }
            }
          }
        }
      }
    })
  </script>