方式一
//如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候， //需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接； Vue.component('mycom1', Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件</h3>' }))方式二
// 注意:不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 Vue.component('mycom2', { template: '<div><h3>这是直接使用 Vue.component 创建出来的组件</h3></div>' })方式三
在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构 <template id="tmpl"> <div> <h1>这是通过 template 元素,在外部定义的组件结构</h1> </div> </template> Vue.component('mycom3', { template: '#tmpl' })父组件向子组件传值 父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用
<body> <div id="app"> <com1 v-bind:parentmsg="msg"></com1> </div> <script> var vm = new Vue({ el: '#app', data: { msg: '父组件中的数据msg' }, methods: {}, components: { // 子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法 com1: { data() { // 注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上； // data 上的数据，都是可读可写的； return { title: '123' } }, template: '<h1 @click="change">这是子组件 --- {{ parentmsg }}</h1>', // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的 // props 中的数据，都是只读的，无法重新赋值 props: ['parentmsg'], // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据 directives: {}, filters: {}, components: {}, methods: { change() { this.parentmsg = '被修改了' } } } } }); </script> </body>父组件把方法传递给组件
<body> <div id="app"> <!-- 父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了 --> <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', data() { return { sonmsg: { name: 'zhangsan', age: 6 } } }, methods: { myclick() { // 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？如下 this.$emit('func', this.sonmsg) } } } var vm = new Vue({ el: '#app', data: { datamsgFormSon: null }, methods: { show(data) { // console.log('调用了父组件身上的 show 方法: --- ' + data) this.datamsgFormSon = data } }, components: {com2} }); </script> </body>