<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
</head>
<body>
? ? <div id="app">
? ? ? ? <!-- 下面是一個h1標簽 -->
? ? ? ? <h1 ref='hh'>hello father</h1>
? ? ? ? <!-- 下面是一個子組件child -->
? ? ? ? <child ref='cc'></child>
? ? ? ? <!-- 下面是v-for循環(huán)出來的li -->
? ? ? ? <ul>
? ? ? ? ? ? <li v-for='item in arr' :key='item' ref='ll'>{{item}}</li>
? ? ? ? </ul>
? ? ? ? <button @click='clickHanlder'>click me</button>
? ? </div>
? ? <script src="https://cn.vuejs.org/js/vue.js"></script>
? ? <script>
? ? ? ? /*
? ? ? ? ? ? ref傳值
? ? ? ? ? ? ? ? == 你可以在標簽或者組件上添加ref屬性
? ? ? ? ? ? ? ? == 屬性值是一個字符串
? ? ? ? ? ? ? ? == 比如: ref='hh'
? ? ? ? ? ? ? ? == 寫了ref屬性以后，可以通過 : vm.$refs.hh 獲取當前的標簽或者組件
? ? ? ? */
? ? ? ? // 全局子組件
? ? ? ? Vue.component('child',{
? ? ? ? ? ? template:`<div>{{childname}}</div>`,
? ? ? ? ? ? data(){
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? childname:'lucy'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? methods:{
? ? ? ? ? ? ? ? getState(data){
? ? ? ? ? ? ? ? ? ? console.log(data)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? let vm = new Vue({
? ? ? ? ? ? el:'#app',
? ? ? ? ? ? data:{
? ? ? ? ? ? ? ? arr:[
? ? ? ? ? ? ? ? ? ? '中文','韓文','馬來西亞'
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? },
? ? ? ? ? ? methods:{
? ? ? ? ? ? ? ? clickHanlder(){
? ? ? ? ? ? ? ? ? ? // 如果ref='hh'是在一個標簽上，那獲取的就是dom節(jié)點
? ? ? ? ? ? ? ? ? ? console.log(this.$refs.hh)
? ? ? ? ? ? ? ? ? ? // 如果ref='ll'是在一個循環(huán)的標簽上，那獲取的就是dom節(jié)點集合
? ? ? ? ? ? ? ? ? ? console.log(this.$refs.ll)
? ? ? ? ? ? ? ? ? ? // 如果ref='cc'實在一個組件標簽上瓶佳，那獲取的就是當前的組件實例
? ? ? ? ? ? ? ? ? ? console.log(this.$refs.cc)
? ? ? ? ? ? ? ? ? ? // 獲取子組件child里面的變量值
? ? ? ? ? ? ? ? ? ? console.log(this.$refs.cc.childname)
? ? ? ? ? ? ? ? ? ? // 可以給子組件child里面的變量賦值
? ? ? ? ? ? ? ? ? ? this.$refs.cc.childname = "2222222";
? ? ? ? ? ? ? ? ? ? // 也可以調(diào)用child里面的方法
? ? ? ? ? ? ? ? ? ? this.$refs.cc.getState('HELLO')
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>
</html>
