<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="id1">
<my-component></my-component>
<mycomponent2></mycomponent2>
<mycomponent3></mycomponent3>
<test1></test1>
<test11></test11>
<!-- 父组件可以在引用子组件的时候，通过属性绑定的形式，把dada的数据给子组件 -->
<test22 :parentmag="mission1">这个slot插槽是对html内容的传递</test22>
<tesst33>
<template v-slot:xxx="wuwu">
<h3 style="color: #1B6D85;" v-for="item in wuwu.mis">{{item.last}}</h3>
</template>
<template>
<h3>无效</h3>
</template>
</tesst33>
</div>
<template id="tem1">
<h1>這個是第3种方法，在外部定义组件html结构</h1>
</template>
<template id="tess">
<h1>这个是在私有属性里面经行定义</h1>
</template>
<template id="ttt1">
<div>
<slot v-bind:mis="mis" name="xxx">无主句</slot>
<slot></slot>
</div>
</template>
<script type="text/javascript">
/*步骤一*/
/*使用extend创建全局Vue组件*/
var com1 = Vue.extend({
template: '<h1>通过template属性来定义组件html结构</h1>'
})
/*步骤二*/
/*Vue.component("组件的名称",组件的对象名)注册，驼峰注意转换格式，当然可以在对象里面直接写com1*/
Vue.component("myComponent", com1)
/*方法2 */
/* 组件可以有自己的data 但是组件的为function,方法和实列一样 */
Vue.component('mycomponent2', {
template: '<h2>第二种方式{{mission}}</h2>',
data() {
return {
mission: 'data'
}
}
})
/*方式3*/
Vue.component("mycomponent3", {
template: '#tem1'
})
var vm = new Vue({
el: "#id1",
data: {
mission1: '父组件'
},
components: {
test1: {
template: '#tess'
},
test11: {
template: '<h1>子组件默认是无法访问父组件的data数据的{{mission1}}</h1>'
},
test22: {
/* */
template: '<h2>使用自定义属性来传值需要{{parentmag}},<slot></slot></h2>',
/* 唯一一个数组，把父组件的parentmag重新定义一下方可使用，都是父组件给子组件的 */
props: ['parentmag']
},
tesst33: {
template: '#ttt1',
data() {
return {
mis: [{
last: '解开了'
}, {
last: '这个'
}]
}
}
}
}
})
</script>
</body>
</html>
网友评论