案例:Vue.js案例     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>Vue 测试实例 - W3xue教程(w3xue.com)</title>
6
<script src="//unpkg.com/vue/dist/vue.js"></script>
7
</head>
8
<body>
9
<div id="app">
10
    <div>
11
      <input v-model="parentMsg">
12
      <br>
13
      <child v-bind:message="parentMsg"></child>
14
    </div>
15
</div>
16
17
<script>
18
// 注册
19
Vue.component('child', {
20
  // 声明 props
21
  props: ['message'],
22
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
23
  template: '<span>{{ message }}</span>'
24
})
25
// 创建根实例
26
new Vue({
27
  el: '#app',
28
  data: {
29
    parentMsg: '父组件内容'
30
  }
31
})
32
</script>
33
</body>
34
</html>