は、まず、彼の$emitの方法であると言わざるを得ない.以下、サブコンポーネントが親コンポーネントに値を伝える例を挙げる.の < ! DOCTYPE html>
< html>
< head>
< title> vueReivew05< / title>
< script src= 'vue2.js' > < / script>
< script src= 'vue-router3.js' > < / script>
< script type= "text/javascript" >
window. onload = function ( ) {
Vue. component ( 'hello' , {
template:
`
hello
click me
` ,
data ( ) {
return {
msg: 'hello'
}
} ,
methods: {
send ( ) {
this . $emit ( 'func' , this . msg) ;
}
}
} ) ;
var vm= new Vue ( {
data: {
} ,
methods: {
getMess ( data) {
console. log ( data) ;
}
}
} ) . $mount ( 'div' ) ;
}
< / script>
< / head>
< body>
< div>
< hello @func= 'getMess' > < / hello>
< / div>
< / body>
< / html>
$refsプロパティは、Dom要素 を取り出すのに便利です.
< ! DOCTYPE html>
< html>
< head>
< title> vueReivew05< / title>
< script src= 'vue2.js' > < / script>
< script src= 'vue-router3.js' > < / script>
< script type= "text/javascript" >
window. onload = function ( ) {
var vm= new Vue ( {
data: {
} ,
methods: {
getMess ( data) {
console. log ( data) ;
} ,
res ( ) {
console. log ( this . $refs. myPar. innerHTML) ;
}
}
} ) . $mount ( 'div' ) ;
}
< / script>
< / head>
< body>
< div>
< p ref= 'myPar' > this is about home story! ! ! < / p>
< button @click= 'res' > res with ref< / button>
< / div>
< / body>
< / html>
$route属性 < ! DOCTYPE html>
< html>
< head>
< title> vueRouter03< / title>
< script src= 'vue2.js' > < / script>
< script src= 'vue-router3.js' > < / script>
< script type= "text/javascript" >
window. onload = function ( ) {
var login= {
template: '#login' ,
methods: {
res ( ) {
console. log ( this . $route. params. id) ;
console. log ( this . $route. query. name) ;
console. log ( this . $route. query. age) ;
}
}
}
var router= new VueRouter ( {
routes: [
{
path: '/login/:id' ,
component: login
}
]
} )
var vm= new Vue ( {
router: router
} ) . $mount ( 'div' ) ;
}
< / script>
< / head>
< body>
< div>
< router- link to= '/login/12?name="zhu"&age=15' > login< / router- link>
< router- view> < / router- view>
< / div>
< template id= 'login' >
< div>
< h1> login success< / h1>
< button @click= 'res' > click me< / button>
< / div>
< / template>
< / body>
< / html>